TASIOMIND.DEV — OPERATIONAL▸▸▸FULL STACK DEVELOPER @ GWQ SERVICEPLUS AG▸▸▸FOUNDER — K8SGPT.AI▸▸▸OPEN SOURCE: ACTIVE▸▸▸DISTRIBUTED SYSTEMS / KUBERNETES / AI▸▸▸RUST + GO + PYTHON▸▸▸FIELD TESTED / STATUS — NOMINAL▸▸▸LOCATION: EUROPE/BERLIN▸▸▸TASIOMIND.DEV — OPERATIONAL▸▸▸FULL STACK DEVELOPER @ GWQ SERVICEPLUS AG▸▸▸FOUNDER — K8SGPT.AI▸▸▸OPEN SOURCE: ACTIVE▸▸▸DISTRIBUTED SYSTEMS / KUBERNETES / AI▸▸▸RUST + GO + PYTHON▸▸▸FIELD TESTED / STATUS — NOMINAL▸▸▸LOCATION: EUROPE/BERLIN▸▸▸
← webdev

Adding and Removing Nodes (HTML Elements)

March 21, 2017

Creating new nodes

  • createElement() creates an HTML element
  • createTextNode() creates a text node
  • appendChild() appends (adds to the end) a node
  • insertBefore() prepends a node, opposite of .appendChild()
  • removeChild() removes a child node
  • replaceChild() replaces a child node
  • cloneNode() creates a copy of the node (You can clone a node before adding it for example)

Creating and adding

code
let paragraph = document.createElement("p"); // create a paragraph (<p> element)

// to add text to the <p> element, create a text node first
let node1 = document.createTextNode("This is new paragraph i just added to the DOM");
let node2 = document.createTextNode("This is the text i'm going to add before");

paragraph.appendChild(node1); // add (append) the text node to the <p> element
code
// create a container <div> element
let container = document.createElement("div");

// cerate two paragraph <p> elements
let para = document.createElement("p"); // create a pragraph
let anotherPara = document.createElement("p"); // create another paragraph

// create some text nodes to add to <p> elements
let text1 = document.createTextNode("This is some text");
let text2 = document.createTextNode("This is some more random text");

// append text to paragraphs
para.append(text1);
anotherPara.append(text2);

console.info(para); // <p>This is some text</p>
console.info(anotherPara); // <p>This is some more random text</p>
console.info(container); // <div></div>

// append a paragraph to a div
container.append(para);
console.info(container); // <div><p>This is some text</p></div>

// insert a paragraph before another paragraph in the div
// parentNode.insertBefore(newNode, referenceNode)
container.insertBefore(anotherPara, para);
console.info(container); // <div><p>This is some more random text</p><p>This is some text</p></div>

We have created the following HTML structure using JavaScript

code
<div>
  <p> This is some more random text </p>
  <p> This is some text </p>
</div>

Removing nodes

code
let parent = document.getElementById("div1");
let child = document.getElementById("p1");

parent.removeChild(child);

Replacing nodes

code
let para = document.createElement("p");
let node = document.createTextNode("This is new.");
para.appendChild(node);

let parent = document.getElementById("div1");
let child = document.getElementById("p1");
parent.replaceChild(para, child);

Links