JavaScript's Document.createElement()
method is used to create new HTML elements. Here's what that looks like in action:
const root = document.body;
const newElement = document.createElement('div');
newElement.textContent = 'Hello World';
root.append(newElement);
As you can see, creating an element is easy. The tiresome part is having to set all of its attributes and then add it to the DOM. Worse even, creating multiple elements with the same set of attributes requires a lot of repetitive code.
Luckily, we can abstract element creation into a function. In fact, we can use objects to pass attributes to the element. Using Object.entries()
we can iterate over the object and set the attributes. Here's what that looks like:
const root = document.body;
const createElement = (el, parent, prepend = false) => {
const { nodeName = 'div', ...attrs } = el;
const element = document.createElement(nodeName);
Object.entries(attrs).forEach(([attr, value]) => {
element[attr] = value;
});
if (prepend) parent.prepend(element);
else parent.append(element);
};
createElement(
{
nodeName: 'div',
textContent: 'Hello world',
},
root
);
createElement(
{
nodeName: 'p',
textContent: 'Hi',
},
root,
true
);
That's pretty useful, but what happens if we have an HTML string we want to create an element from, instead? We have a createElement snippet that does something along those lines. The only part that's missing is appending it to the parent element.
JavaScript, Browser
Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.
JavaScript, Browser
Converts the given array elements into <li>
tags and appends them to the list of the given id.
JavaScript, Browser
Creates a new MutationObserver
and runs the provided callback for each mutation on the specified element.