appendchild w3 code example

Example 1: create and append element in javascript

//create and append element
 var node = document.createElement("LI");                 // Create a <li> node

 var textnode = document.createTextNode("Water");         // Create a text node

 node.appendChild(textnode);                              // Append the text to <li>

 document.getElementById("myList").appendChild(node);

Example 2: appendchild javascript

function createMenuItem(name) {
    let li = document.createElement('li');
    li.textContent = name;
    return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));

Example 3: appendchild javascript

const parent = document.createElement('div');
const child = document.createElement('p');
const childTwo = document.createElement('p');
parent.append(child, childTwo, 'Hello world'); // Works fine
parent.appendChild(child, childTwo, 'Hello world');
// Works fine, but adds the first element and ignores the rest