EN
JavaScript - replace all children of HTML element
0 points
In this article, we would like to show you how to replace all children of an HTML element using JavaScript.
Quick solution:
xxxxxxxxxx1
element.innerHTML = '';2
3
element.append(newChild1, newChild2);
In this example, we set the container element innerHTML to an empty string ('') to remove all its children, and then we add new ones using append() method.
xxxxxxxxxx1
2
<html>3
<body>4
<div id="container">5
<div>child1</div>6
<div>child2</div>7
</div>8
<script>9
10
var container = document.querySelector('#container');11
12
// remove all children from container13
container.innerHTML = '';14
15
// create new children16
var newChild1 = document.createElement('div');17
newChild1.textContent = 'new child 1';18
19
var newChild2 = document.createElement('div');20
newChild2.textContent = 'new child 2';21
22
// append new children to the container23
container.append(newChild1, newChild2);24
25
</script>26
</body>27
</html>