Tengo una pregunta sobre estos dos códigos similares y quiero saber las ventajas y desventajas de usarlo. ¿O no importa cuál usar? En la primera versión estoy usando parámetros y en la segunda no... También estoy interesado en all_h1.querySelectorAll(`h1`)
¿Por qué no es lo mismo que const children =parent.childNodes;
```HTML <div id="parent"> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> <h1>We Will Manipulate LIVE nodeList Element nodes and #textNodes</h1> </div> ```
.addStyle { width: 1050px; border-radius: 50px; padding: 0.5em 0.5em; }
primera versión del código con el uso de Parámetros:
const parent = document.querySelector(`#parent`); //const children = parent.childNodes; const function_CreateH1 = (parent_container, text_parameter) => { parent_container.insertAdjacentHTML(`afterbegin`, `<h1>${text_parameter}</h1>`); }; function_CreateH1(parent, `Add New H1 element Wait (1,2,3...and Go)`); const replaceAllH1Text = (all_h1, newtext_parameter) => { all_h1.querySelectorAll(`h1`).forEach((elem) => { elem.textContent = newtext_parameter; elem.style.backgroundColor = `brown`; elem.style.color = `white`; elem.classList.add(`addStyle`); //Why isn't working children.forEach and etc. }); }; setTimeout(() => { replaceAllH1Text(parent, `We access and Modify H1 elements itselfs and #Text nodes`); }, 3000);
Segunda versión del código sin usar Parámetros en función:
const parent = document.querySelector(`#parent`); //const children = parent.childNodes; const function_CreateH1 = () => { parent.insertAdjacentHTML(`afterbegin`, `<h1>Add New H1 element Wait (1,2,3...and Go)</h1>`); }; function_CreateH1(); const replaceAllH1Text = () => { parent.querySelectorAll(`h1`).forEach((elem) => { elem.textContent = `We access and Modify H1 elements itselfs and #Text nodes`; elem.style.backgroundColor = `brown`; elem.style.color = `white`; elem.classList.add(`addStyle`); //Why isn't working children.forEach and etc. }); }; setTimeout(() => { replaceAllH1Text(); }, 3000);
Puede simplificar el bucle de código document.querySelectorAll
.
Para la creación de un nuevo elemento li
, el fragmento contiene una función separada appendLi
. Utiliza insertAdjacentHTML
y una cadena de plantilla para agregar el nuevo li
.
La función replaceAllLiText
contiene el bucle para cambiar el texto de todos los li
en el ul
.
const appendLi = (ul, text) => ul.insertAdjacentHTML(`beforeend`, `<li>${text}</li>`); // │ ^┍ the html to append, // │ │ using a template string // │ ┕ to inject [text] // ┕ add the html last within [ul] const replaceAllLiText = (ul, nwText) => ul.querySelectorAll(`li`).forEach(li => li.textContent = nwText); // │ ┕ set [li] text to [nwText] // ┕ loop all li's within [ul] const ul = document.querySelector(`ul`); // append a new li-element with text to the ul appendLi(ul, `this is new Li (wait a sec...)`); // wait two seconds, then change the text of all li's setTimeout(() => replaceAllLiText(ul, `This is working`), 2000);
<ul> <li>foo</li> <li>bar</li> <li>bar</li> </ul>`