Update the DOM Easily with the Re:dom Library

Photo by Leo Foureaux on Unsplash

We can update the DOM with the Re:dom library in a way easier than plain JavaScript.

In this article, we’ll look at how to use the library to diff the DOM and patch it.

Installation

We can install the Dom Diff library by running:

npm install redom

Adding Elements

We can add elements with the el method.

To use it, we write:

import { el, mount } from "redom";
const hello = el("h1", "Hello world!");
mount(document.body, hello);

The first argument is the tag name.

The 2nd argument is text content.

The mount method mounts the hello DOM object into the body element.

We can also change the element after we created it:

import { text, mount } from "redom";
const hello = text("hello");
mount(document.body, hello);
hello.textContent = "hi!";

Now we see hi! on the screen instead of hello since we changed it by changing the textContent property.