Clear the Content of a Div element using JavaScript

# Clear the Content of a Div element using JavaScript

Use the replaceChildren() method to clear the content of a div element, e.g. div.replaceChildren().

When the replaceChildren method is invoked without passing it any arguments, the method empties the element of all its children.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="container">
      <p>Apple</p>
      <p>Pear</p>
      <p>Banana</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const container = document.getElementById('container');

container.replaceChildren();

clear content of div element

The code for this article is available on GitHub

We called the replaceChildren() method without passing it any parameters, which cleared the contents of the div element.

The method can also be used to replace the existing children of an element with a provided set of children.

index.js

Copied!
const container = document.getElementById('container');

const p1 = document.createElement('p');
p1.innerHTML = `<span style="background-color: lime">Apple</span>`;

const p2 = document.createElement('p');
p2.innerHTML = `<span style="background-color: orange">Orange</span>`;

container.replaceChildren(p1, p2);

// ✅ If you have a collection of elements
// use spread operator (...) to unpack the collection
// container.replaceChildren(...[p1, p2]);

replace existing children of element with provided set of children

The code for this article is available on GitHub

By using the replaceChildren() method, we can clear the contents of the div and add a new set of children to it in a single step, which is a bit faster.

The method takes one or more Node objects or strings, with which it replaces the element's existing children.

# Clear the contents of a Div on a button click

Here is an example that clears the contents of a div element on a button click.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="container">
      <p>Apple</p>
      <p>Pear</p>
      <p>Banana</p>
    </div>

    <button id="btn">Clear div contents</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const container = document.getElementById('container');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  container.replaceChildren();
});

The code for this article is available on GitHub

We added a click event listener to the button element.

Every time the button is clicked, the handleClick function is invoked, where we simply call the replaceChildren method.

# Empty a DOM element using textContent

Alternatively, you can set the element's textContent property to an empty string.

Setting textContent on the element removes all of its children and replaces them with a single text node of the provided value.

index.js

Copied!
const container = document.getElementById('container');

container.textContent = '';

The code for this article is available on GitHub

The textContent property can be used to read and set the text content of an element.

When using the property to set a node's text content, all of the element's children are removed and replaced with the provided string value.

In the example above, we effectively replace all of the div's children with an empty string.

You might also see the innerHTML property being used in a similar way.

index.js

Copied!
const container = document.getElementById('container');

container.innerHTML = '';

This achieves the same result, however, it might be slower because setting the innerHTML property uses the browser's HTML parser.

The textContent property doesn't use the browser's HTML parser and might be faster if the element has many children.

Which approach you pick is a matter of personal preference. I'd go with the replaceChildren method as it is direct, easy to read and can be used to replace the removed child elements in a single step.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Clear the Content of a Div element using JavaScript