append Child js code example
Example 1: first child element javascript
Both these will give you the first child node:
console.log(parentElement.firstChild);
console.log(parentElement.childNodes[0]);
If you need the first child that is an element node then use:
console.log(parentElement.children[0]);
Example 2: add element to body javascript
var elem = document.createElement('div');
elem.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000';
document.body.appendChild(elem);
Example 3: JavaScript append text to div
var div = document.getElementById('myElementID');
div.innerHTML += "Here is some more data appended";
Example 4: add item to list javascript
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
Example 5: appendchild javascript
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
const menu = document.querySelector('#menu');
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
Example 6: appendchild javascript
const parent = document.createElement('div');
const child = document.createElement('p');
const childTwo = document.createElement('p');
parent.append(child, childTwo, 'Hello world');
parent.appendChild(child, childTwo, 'Hello world');