javascript dom add element code example

Example 1: insert element to dom

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);     // Append <li> to <ul> with id="myList"

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: how to add elements in javascript html

//adding 'p' tag to body

  var tag = document.createElement("p"); // <p></p>
  var text = document.createTextNode("TEST TEXT"); 
  tag.appendChild(text); // <p>TEST TEXT</p>
  var element = document.getElementsByTagName("body")[0];
  element.appendChild(tag); // <body> <p>TEST TEXT</p> </body>

Example 4: appendchild javascript

const parent = document.createElement('div');
const child = document.createElement('p');
// Appending Node Objects
parent.append(child) // Works fine
parent.appendChild(child) // Works fine
// Appending DOMStrings
parent.append('Hello world') // Works fine
parent.appendChild('Hello world') // Throws error

Tags:

Javascript Example

Related