Creating and removing elements
You can not only change a page but also add to it: product cards, chat messages, table rows. New elements are created right in JavaScript — often from an array of data that came from the server.
createElement and append
The document.createElement() method creates a new element. For now it is just an object in memory — it appears on the page once you add it to another element with the append() method:
<ul id="list"></ul>
<script>
const item = document.createElement('li');
item.textContent = 'Tea';
document.querySelector('#list').append(item);
</script>append() adds the element at the end, after everything already inside.
Where to insert
Besides append() there are three more insertion methods. All of them accept elements or plain strings:
| Method | Where it inserts |
|---|---|
parent.append(el) | At the end of the parent |
parent.prepend(el) | At the start of the parent |
el.before(other) | Before the element, outside it |
el.after(other) | After the element, outside it |
<ul id="list">
<li>Second</li>
</ul>
<script>
const first = document.createElement('li');
first.textContent = 'First';
document.querySelector('#list').prepend(first);
</script>A list from an array
Elements are usually built in a loop over an array of data — this is how lists, tables and cards are made:
<ul id="list"></ul>
<script>
const list = document.querySelector('#list');
const drinks = ['Tea', 'Coffee', 'Juice'];
for (const name of drinks) {
const item = document.createElement('li');
item.textContent = name;
list.append(item);
}
console.log(list.children.length); // 3
</script>The children property holds the child elements — the ones directly inside.
An element with a class and attributes
You give a new element everything it needs straight away: a class, attributes, nested elements. It is handy to put the creation into a function:
<div id="products"></div>
<script>
function createCard(title, price) {
const card = document.createElement('div');
card.className = 'card';
card.dataset.price = price;
const heading = document.createElement('h3');
heading.textContent = title;
card.append(heading, `Price: $${price}`);
return card;
}
document.querySelector('#products').append(createCard('Laptop', 900));
</script>Removing
The remove() method takes an element off the page. To clear all the content of an element, call replaceChildren() without arguments:
<p>First paragraph</p>
<p id="extra">Extra paragraph</p>
<script>
document.querySelector('#extra').remove();
console.log(document.querySelectorAll('p').length); // 1
</script>Common mistake
Expecting a second append() of the same element to make a copy. An element can be in only one place on the page, so it simply moves:
<ul id="a"></ul>
<ul id="b"></ul>
<script>
const item = document.createElement('li');
item.textContent = 'One';
document.querySelector('#a').append(item);
document.querySelector('#b').append(item);
console.log(document.querySelectorAll('li').length); // 1
</script>If you need several identical elements, create each one anew or copy it with the cloneNode(true) method.