Esta función createHtmlElement() creará de manera predeterminada una etiqueta <div> en el cuerpo sin nada como contenido dinámicamente. Pero si el usuario no proporciona el argumento parentId y salta al parámetro elementName usando una coma (como esta { createHtmlElement("", "div", "hello", "append") } ), entonces dice: "DOMException no detectada: error para ejecutar 'querySelector' en 'Documento': el selector proporcionado está vacío".
function createHtmlElement(parentId = "body" , elementName = "div", elementContent = "", choice ="append"){ let parent = document.querySelector(`${parentId}`) || document.body; //parent element (parentId) let newElement = document.createElement(`${elementName}`)//created element (newElementName) newElement.textContent = `${elementContent}`;//element content (newElementContent) console.log(parent) console.log(newElement) parent.appendChild(newElement); } createHtmlElement("body" , "h2", "this is h2 tag")//this works totally fine createHtmlElement("", "h2","this is h2 tag")// console says the provided selector is emptyDígame cómo puedo dar una funcionalidad que si no doy el primer argumento pero puedo dar el segundo argumento y la función se ejecuta normalmente. porque si crea 20 o 30 etiquetas y escribe "cuerpo" en cada línea, consume mucho tiempo y espacio, ¿cómo puedo omitir el primer argumento y dar valor al segundo argumento?
Mueva parentId al final, luego puede omitirlo
function createHtmlElement(elementName = "div", elementContent = "", choice = "append", parentId = "body") { let parent = document.querySelector(`${parentId}`) || document.body; //parent element (parentId) let newElement = document.createElement(`${elementName}`) //created element (newElementName) newElement.textContent = `${elementContent}`; //element content (newElementContent) console.log(parent) console.log(newElement) parent.appendChild(newElement); } createHtmlElement("h2", "this is h2 tag", "body") //this works totally fine createHtmlElement("h2", "this is h2 tag") // now it works Si no desea moverlo, debe pasar undefined . Tenga en cuenta que null no funcionará
function createHtmlElement(parentId = "body", elementName = "div", elementContent = "", choice = "append") { console.log(parentId) let parent = document.querySelector(`${parentId}`) || document.body; //parent element (parentId) let newElement = document.createElement(`${elementName}`) //created element (newElementName) newElement.textContent = `${elementContent}`; //element content (newElementContent) console.log(parent) console.log(newElement) parent.appendChild(newElement); } createHtmlElement("body", "h2", "this is h2 tag", "body") //this works totally fine createHtmlElement(undefined, "h2", "this is h2 tag") // now it worksAlternativamente, pase un objeto y extiéndalo
function createHtmlElement(parms) { const { parentId, elementName, elementContent, choice } = parms; let parent = document.querySelector(`${parentId || "body"}`); // if passed use parentId let newElement = document.createElement(`${elementName}`) //created element (newElementName) newElement.textContent = `${elementContent}`; //element content (newElementContent) console.log(parent) console.log(newElement) parent.appendChild(newElement); } createHtmlElement({"parentId": "body", "elementName":"h2", "elementContent": "this is h2 tag"}) createHtmlElement({"elementName":"h2", "elementContent": "this is h2 tag"})Simplemente puede pasar indefinido para omitir un argumento para JavaScript:
function createHtmlElement(parentId = "body", elementName = "div", elementContent = "", choice = "append") { console.log(parentId) } createHtmlElement(undefined, "h2", "this is h2 tag")agregue debajo de la línea uno la primera línea de su función createHtmlElement .
if(!parentId){ parentId = "body" } function createHtmlElement(parentId = "body", elementName = "div", elementContent = "", choice = "append") { if (!parentId) { parentId = "body" } let parent = document.querySelector(`${parentId}`) || document.body; //parent element (parentId) let newElement = document.createElement(`${elementName}`) //created element (newElementName) newElement.textContent = `${elementContent}`; //element content (newElementContent) console.log(parent) console.log(newElement) parent.appendChild(newElement); } createHtmlElement("", "h2", "this is h2 tag") // console says the provided selector is emptySin embargo, le sugiero que cambie su argumento a un objeto en lugar de múltiples argumentos:
function createHtmlElement(options) { if(!options){ throw new Error("options is missing") } let parentId = options.parentId || "body" let elementName = options.elementName let elementContent = options.elementContent let choice = options.choice // following by your logics }Entonces, cuando llama a la función, simplemente puede hacer esto en lugar de ingresar una cadena vacía:
createHtmlElement({ parentId: "body" , //just remove this property if you don't want to do this step elementName: "div", elementContent: "", choice: "append })Esto lo ayuda a reconocer qué argumento es para qué propósito cuando llama a la función, especialmente cuando desea usarla tantas veces, en el futuro puede olvidar el segundo o tercer argumento para qué propósito, entonces tiene que seguir desplazándose Volvamos a la función para comprobar cuál es el propósito del argumento.