---
title: DOM Nodes
description: "> Adding and Removing Nodes (HTML Elements) --- ## Creating New HTML Elements (Nodes) To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element. ###…"
url: "https://apprentice.mn/docs/dom-nodes/"
updated: "2021-05-19"
category: Javascript
---

# DOM Nodes

> Adding and Removing Nodes (HTML Elements)

---

## Creating New HTML Elements (Nodes)

To add a new element to the HTML DOM, you must create the element (element node) first, 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.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>`

## Example Explained 

This code creates a new `<p>` element:

  var para = document.createElement(“p”);

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

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

Then you must append the text node to the `<p>` element:

  para.appendChild(node);

Finally you must append the new element to an existing element.

This code finds an existing element:

  var element = document.getElementById(“div1”);

This code appends the new element to the existing element:

  element.appendChild(para);

---

   

---

## Creating new HTML Elements – insertBefore()

The `appendChild()` method in the previous example, appended the new element as the last child of the parent.

If you don’t want that you can use the `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.");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>`

## Removing Existing HTML Elements

To remove an HTML element, use the `remove()` method:

### Example

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

<script>
var elmnt = document.getElementById("p1");
elmnt.remove();
</script>`

## Example Explained 

The HTML document contains a `<div>` element with two child nodes (two `<p>` elements):

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

Find the element you want to remove:

  var elmnt = document.getElementById(“p1”);

Then execute the remove() method on that element:

  elmnt.remove();

The `remove()` method does not work in older browsers, see the example below on how to use `removeChild()` instead.

---

## Removing a Child Node

For browsers that does not support the `remove()` method, you have to find the parent node to remove an element:

### Example

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

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>`

## Example Explained 

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

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

Find the element with `id="div1"`:

  var parent = document.getElementById(“div1”);

Find the `<p>` element with `id="p1"`:

  var child = document.getElementById(“p1”);

Remove the child from the parent:

  parent.removeChild(child);

Here is a common workaround: Find the child you want to remove, and use its `parentNode` property to find the parent:

  var child = document.getElementById(“p1”);
child.parentNode.removeChild(child);

---

## Replacing HTML Elements 

To replace an element to the HTML DOM, use the `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.");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-nodes%2F&linkname=DOM%20Nodes](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-nodes%2F&linkname=DOM%20Nodes)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-nodes%2F&linkname=DOM%20Nodes](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-nodes%2F&linkname=DOM%20Nodes)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-nodes%2F&linkname=DOM%20Nodes](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-nodes%2F&linkname=DOM%20Nodes)[https://www.addtoany.com/share](https://www.addtoany.com/share)