I have question about this two similar codes , and want to know advantages and disadvantages of using it.or there is no matter which one use?In first version I am using parameters and in second not...
Also interested in all_h1.querySelectorAll(`h1`)
Why is not same as 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;
}
first version of the code with using Parameters:
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);
Second version of the code without using Parameters in function:
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);
You can simplify the code looping document.querySelectorAll.
For the creation of a new li-element the snippet contains a separate function appendLi. It uses insertAdjacentHTML and a template string to append the new li.
The function replaceAllLiText contains the loop to change the text for all li's in the 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>`