Skip to main content

Creating and Removing Elements

DOM API makes it possible not only to select or modify existing elements, but also to remove and create new ones, and then add them to the document.

Creation​

document.createElement(tagName);

Creates an element named tagName and returns a reference to it as the result of execution. tagName is a string indicating the type of the element to be created. The element is created in memory, it does not exist in DOM yet.

const heading = document.createElement("h1");
console.log(heading); // <h1></h1>

heading.textContent = "This is a heading";
console.log(heading); // <h1>This is a heading</h1>

const image = document.createElement("img");
image.src = "https://placeimg.com/640/480/nature";
image.alt = "Nature";
console.log(image); // <img src="https://placeimg.com/640/480/nature" alt="Nature" />

Addition​

For the created element to be displayed on the page, it must be added to an already existing element in the DOM tree. Let's suppose that you add to an element called element. You can use the following methods:

  • element.append(el1, el2, ...) adds one or more elements after all children of the element element.
  • element.prepend(el1, el2, ...) adds one or more elements before all children of the element element.
  • element.after(el1, el2, ...) adds one or more elements after the element element.
  • element.before(el1, el2, ...) adds one or more elements before the element element.

In all these methods, el are elements or strings, in any combination or number. Lines are added as text nodes.

Note

If the element to be inserted is already in DOM, it is removed from its old place and added to the new one. Hence, the rule follows: the same element cannot be in two places at the same time.

Removal​

elem.remove();

To remove an element, use the remove() method. It is invoked on the elem element that needs to be removed.

DOM optimization​

Modern browsers try to optimize page rendering without developer intervention. However, changing the DOM tree is an expensive operation, so you should try to minimize the number of DOM calls.

Repaint occurs when changes have affected the styles that define the appearance of the element, but not its geometry. For example, opacity, background-color, visibility and outline. The browser will render the element again using the new style. The visibility of other elements is also checked because one or more of them may be hidden under the element with modified appearance.

Reflow occurs when changes affect the content, structure of the document or the position of elements. Positioning and dimensions are then recalculated, which leads to redrawing part or all of the document. Resizing one parent container will affect all of its children and ancestors. It impacts performance much more than repaint.

All of the above operations block the browser. The page cannot perform any other operations while reflow or repaint is in progress. The reasons may be:

  • DOM manipulations (adding, removing, modifying, rearranging elements)
  • Changes to content, including text in form fields
  • Calculating or changing CSS properties
  • Adding and removing style sheets
  • Manipulations with the class attribute
  • Manipulations with the browser window (resizing, scrolling)
  • Activation of pseudo-classes (for example :hover)