0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>A DOM tree can change when the browser has already been rendered it. This fact provides a key opportunity for creating interactive applications. In this lesson, we will discuss how to manipulate DOM trees and what features we can get by doing so.</p>
1
<p>A DOM tree can change when the browser has already been rendered it. This fact provides a key opportunity for creating interactive applications. In this lesson, we will discuss how to manipulate DOM trees and what features we can get by doing so.</p>
2
<h2>innerHTML</h2>
2
<h2>innerHTML</h2>
3
<p>The easiest way to update a part of a DOM tree is the innerHTML property:</p>
3
<p>The easiest way to update a part of a DOM tree is the innerHTML property:</p>
4
<p>The value of this property completely replaces the descendants of the element on which we have called it. All the HTML found inside is analyzed and becomes part of the tree.</p>
4
<p>The value of this property completely replaces the descendants of the element on which we have called it. All the HTML found inside is analyzed and becomes part of the tree.</p>
5
<p>Imagine we try to insert plain text with a potential HTML in it. It raises the possibility of XSS attacks, so we should use a different property - textContent.</p>
5
<p>Imagine we try to insert plain text with a potential HTML in it. It raises the possibility of XSS attacks, so we should use a different property - textContent.</p>
6
<p>The property textContent works almost identically, it replaces all descendants, too. The main difference between these properties is that textContent treats its content as plain text anyway, even if there's HTML:</p>
6
<p>The property textContent works almost identically, it replaces all descendants, too. The main difference between these properties is that textContent treats its content as plain text anyway, even if there's HTML:</p>
7
<p>The property innerHTML works with strings, which is only convenient if we're working with a static DOM representation. There are special functions suitable for generating a DOM tree dynamically.</p>
7
<p>The property innerHTML works with strings, which is only convenient if we're working with a static DOM representation. There are special functions suitable for generating a DOM tree dynamically.</p>
8
<h2>Creating nodes</h2>
8
<h2>Creating nodes</h2>
9
<p>When the code creates a DOM dynamically, it looks like a nesting doll. Once created, some elements are put into others all the time. The code that creates trees will look like this in any language.</p>
9
<p>When the code creates a DOM dynamically, it looks like a nesting doll. Once created, some elements are put into others all the time. The code that creates trees will look like this in any language.</p>
10
<h2>Insert</h2>
10
<h2>Insert</h2>
11
<p><a>ParentNode.prepend()</a>adds the nodes passed by the first child to ParentNode:</p>
11
<p><a>ParentNode.prepend()</a>adds the nodes passed by the first child to ParentNode:</p>
12
<p><a>ParentNode.append()</a>adds the nodes passed by the last child to ParentNode:</p>
12
<p><a>ParentNode.append()</a>adds the nodes passed by the last child to ParentNode:</p>
13
<p><a>childNode.before(...nodes)</a>inserts nodes into the list of children of the parent node of this childNode right before the childNode itself:</p>
13
<p><a>childNode.before(...nodes)</a>inserts nodes into the list of children of the parent node of this childNode right before the childNode itself:</p>
14
<p><a>childNode.after(...nodes)</a>- inserts nodes into the list of children of the parent node of this childNode immediately after it:</p>
14
<p><a>childNode.after(...nodes)</a>- inserts nodes into the list of children of the parent node of this childNode immediately after it:</p>
15
<p><a>node.replaceWith(...nodes)</a>replaces a single node with multiple ones. The node itself disappears from the DOM tree, but it remains available in the code:</p>
15
<p><a>node.replaceWith(...nodes)</a>replaces a single node with multiple ones. The node itself disappears from the DOM tree, but it remains available in the code:</p>
16
<p>node.remove() removes the current node.</p>
16
<p>node.remove() removes the current node.</p>
17
<h2>Old API</h2>
17
<h2>Old API</h2>
18
<p>The functions described above only appeared lately. Before that, programmers wrote most of the code using the other functions listed below:</p>
18
<p>The functions described above only appeared lately. Before that, programmers wrote most of the code using the other functions listed below:</p>
19
<ul><li>parent.appendChild(el) - adds el to the end of the list of children</li>
19
<ul><li>parent.appendChild(el) - adds el to the end of the list of children</li>
20
<li>parent.insertBefore(el, nextElSibling) - adds el to the list of children of a parent before the nextElSibling</li>
20
<li>parent.insertBefore(el, nextElSibling) - adds el to the list of children of a parent before the nextElSibling</li>
21
<li>parent.removeChild(el) - removes el from the children of a parent</li>
21
<li>parent.removeChild(el) - removes el from the children of a parent</li>
22
<li>parent.replaceChild(newEl, el) - replaces el with newEl</li>
22
<li>parent.replaceChild(newEl, el) - replaces el with newEl</li>
23
</ul><h2>Cloning</h2>
23
</ul><h2>Cloning</h2>
24
<p>Sometimes, you need to create an element similar to an existing one. Of course, you can do this 100% manually by copying the properties of one into the properties of another. But there's an easier way:</p>
24
<p>Sometimes, you need to create an element similar to an existing one. Of course, you can do this 100% manually by copying the properties of one into the properties of another. But there's an easier way:</p>
25
<p>The value true shows that we make a deep copy, meaning a copy of that element with all its descendants.</p>
25
<p>The value true shows that we make a deep copy, meaning a copy of that element with all its descendants.</p>