JS: DOM API

Theory: Manipulating the Dom tree

pages.courses.lessons.theory_unit.sign_up_block_title

pages.courses.lessons.theory_unit.sign_up_block_description

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.

innerHTML

The easiest way to update a part of a DOM tree is the innerHTML property:

<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul>

const body = document.body;
console.log(body);
// <ul><li>item 1</li><li>item 2</li></ul>

body.innerHTML = '<b>make</b> love';
console.log(body.innerHTML);
// <b>make</b> love

console.log(body.childNodes);
// [b, text]

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.

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.

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:

document.body.textContent = '<b>make</b> love';
console.log(document.body.innerHTML);
// All special characters are replaced
// "&lt;b&gt;make&lt;/b&gt; love"

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.

Creating nodes

// Creating a text node
const textNode = document.createTextNode('life is life');

// Creating a p element
const pEl = document.createElement('p');

// Adding the textNode to the end of the childNodes list of the element pEl
pEl.append(textNode);
// pEl.textContent = 'life is life';

const el = document.createElement('div');
el.append(pEl);

console.log(el);
// <div><p>life is life</p></div>

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.

Insert

ParentNode.prepend() adds the nodes passed by the first child to ParentNode:

const div = document.createElement('div');
div.innerHTML = '<span>Hexlet</span>';

const el = document.createElement('p');
el.textContent = 'prepend';
div.prepend(el);
// <div>
//   <p>prepend</p>
//   <span>Hexlet</span>
// </div>

ParentNode.append() adds the nodes passed by the last child to ParentNode:

const div = document.createElement('div');
div.innerHTML = '<span>Hexlet</span>';

const el = document.createElement('p');
el.textContent = 'append';
div.append(el);
// <div>
//   <span>Hexlet</span>
//   <p>append</p>
// </div>

childNode.before(...nodes) inserts nodes into the list of children of the parent node of this childNode right before the childNode itself:

const div = document.createElement('div');
div.innerHTML = '<span>Hexlet</span>';
// Must be inserted into the DOM tree
document.body.append(div);

const el = document.createElement('p');
el.textContent = 'content';
div.before(el);
// <p>content</p>
// <div>
//   <span>Hexlet</span>
// </div>

childNode.after(...nodes) – inserts nodes into the list of children of the parent node of this childNode immediately after it:

const div = document.createElement('div');
div.innerHTML = '<span>Hexlet</span>';
// Must be inserted into the DOM tree
document.body.append(div);

const el = document.createElement('p');
el.textContent = 'content';
div.after(el);
// <div>
//   <span>Hexlet</span>
// </div>
// <p>content</p>

node.replaceWith(...nodes) replaces a single node with multiple ones. The node itself disappears from the DOM tree, but it remains available in the code:

const div = document.createElement('div');
div.innerHTML = '<span>Hexlet</span>';
// Must be inserted into the DOM tree
document.body.append(div);

const el = document.createElement('p');
el.textContent = 'content';
div.replaceWith(el);
// In the DOM tree, p replaces div
// <p>content</p>

node.remove() removes the current node.

Old API

The functions described above only appeared lately. Before that, programmers wrote most of the code using the other functions listed below:

parent.appendChild(el) – adds el to the end of the list of children
parent.insertBefore(el, nextElSibling) – adds el to the list of children of a parent before the nextElSibling
parent.removeChild(el) – removes el from the children of a parent
parent.replaceChild(newEl, el) – replaces el with newEl

Cloning

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: