JavaScript HTML DOM Element (Node)

Add and delete nodes (HTML elements)

Create a new HTML element (node)

To add a new element to the HTML DOM, you must first create this element (element node), and then append it to an existing element.

Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new text.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Try It Yourself

examples explain

This code creates a new <p> Element:

var para = document.createElement("p");

To add <p> If you want to add text to an element, you must first create a text node. This code creates a text node:

var node = document.createTextNode("This is a new paragraph.");

Then you need to append <p> Element append this text node:

para.appendChild(node);

Finally, you need to append this new element to the existing element.

This code finds an existing element:

var element = document.getElementById("div1");

This code appends a new element to this existing element:

element.appendChild(para);

Create new HTML elements - insertBefore()

In the previous example appendChild() method to append a new element as the last child of the parent.

In addition, you can also use insertBefore() Method:

Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new text.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Try It Yourself

delete existing HTML elements

To delete an HTML element, please use remove() Method:

Example

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

Try It Yourself

examples explain

This HTML document contains a document with two child nodes (two <p> elements) of <div> Element:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

find the element to be deleted:

const elmnt = document.getElementById("p1");

Then perform remove() Method:

elmnt.remove();

Note:The remove() method does not work in old browsers, please refer to the following example to learn how to use removeChild().

deleting child nodes

for browsers that do not support remove() method in the browser, you must find the parent node to delete an element:

Example

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Try It Yourself

examples explain

This HTML document contains a document with two child nodes (two <p> elements) of <div> Element:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

find id="div1" elements:

const parent = document.getElementById("div1");

find id="p1" of <p> Element:

const child = document.getElementById("p1");

Remove from the parent element:

parent.removeChild(child);

This is a common solution: find the child node to be deleted and use its parentNode The property finds the parent node:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Replace HTML Element

To replace an element, please use replaceChild() Method:

Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new text.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Try It Yourself