1//create and append element
2 var node = document.createElement("LI"); // Create a <li> node
3
4 var textnode = document.createTextNode("Water"); // Create a text node
5
6 node.appendChild(textnode); // Append the text to <li>
7
8 document.getElementById("myList").appendChild(node);
1const parent = document.createElement('div');
2const child = document.createElement('p');
3const childTwo = document.createElement('p');
4parent.append(child, childTwo, 'Hello world'); // Works fine
5parent.appendChild(child, childTwo, 'Hello world');
6// Works fine, but adds the first element and ignores the rest
7
1const parent = document.createElement('div');
2const child = document.createElement('p');
3// Appending Node Objects
4parent.append(child) // Works fine
5parent.appendChild(child) // Works fine
6// Appending DOMStrings
7parent.append('Hello world') // Works fine
8parent.appendChild('Hello world') // Throws error
9
1var element = document.getElementById("div1");
2element.insertBefore(para, element.firstChild);
1const parent = document.createElement('div');
2const child = document.createElement('p');
3const appendValue = parent.append(child);
4console.log(appendValue) // undefined
5const appendChildValue = parent.appendChild(child);
6console.log(appendChildValue) // <p><p>
7
1var node = document.createElement("LI"); // Create a <li> node
2var textnode = document.createTextNode("Water"); // Create a text node
3node.appendChild(textnode); // Append the text to <li>
4document.getElementById("myList").appendChild(node); // Append <li> to <ul> with id="myList"