JavaScript DOM
JavaScript Inserting Elements
append,prepend,beforeandafterdecide exactly where a new element lands.
Creating an element is only half the job; the other half is placing it.
These four methods cover every position you are likely to want.
Example
Example
javascript
document.body.innerHTML = '<ul id="list"><li>Two</li></ul>';
const li = document.createElement("li");
li.textContent = "One";
document.getElementById("list").prepend(li);
console.log(document.querySelector("li").textContent);The new item went to the front, so the output is One.
The Four Positions
append puts it inside, at the end.
prepend puts it inside, at the start.
before and after put it outside, as a sibling.
Syntax
Syntax
javascript
parent.append(element);
parent.prepend(element);
target.before(element);
target.after(element);append and prepend work on the parent; the others work on the target.
Inside or Outside
This is the distinction to keep straight.
Example
Example
javascript
document.body.innerHTML = '<div id="box"><p>Inside</p></div>';
const box = document.getElementById("box");
const inner = document.createElement("span");
inner.textContent = "in";
box.append(inner);
const outer = document.createElement("span");
outer.textContent = "out";
box.after(outer);
console.log(box.children.length);Only the appended element became a child of the box.
Appending Text
These methods accept strings as well as elements.
Example
Example
javascript
document.body.innerHTML = '<p id="demo">Start</p>';
document.getElementById("demo").append(" and end");
console.log(document.getElementById("demo").textContent);A string is added as text, not parsed as markup.
Moving an Existing Element
Appending an element that is already on the page moves it rather than copying it.
This is a neat way to reorder things.
Example
Example
javascript
document.body.innerHTML =
'<ul id="list"><li id="a">A</li><li id="b">B</li></ul>';
const list = document.getElementById("list");
list.append(document.getElementById("a"));
console.log(list.lastElementChild.id);
console.log(document.querySelectorAll("li").length);The item moved to the end and the count is unchanged.
insertAdjacentHTML
This inserts markup at one of four named positions.
It does not rebuild the rest of the element, unlike innerHTML +=.
Example
Example
javascript
document.body.innerHTML = '<div id="box"><p>Middle</p></div>';
const box = document.getElementById("box");
box.insertAdjacentHTML("afterbegin", "<p>First</p>");
console.log(box.firstElementChild.textContent);The positions are beforebegin, afterbegin, beforeend and afterend.
Adding Several at Once
All of these accept more than one thing to insert.
Example
Example
javascript
document.body.innerHTML = '<ul id="list"></ul>';
const a = document.createElement("li");
a.textContent = "A";
const b = document.createElement("li");
b.textContent = "B";
document.getElementById("list").append(a, b);
console.log(document.querySelectorAll("li").length);Both items were added in one call.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Inserting Elements</title>
</head>
<body>
<h1>Inserting Elements</h1>
<ul id="list">
<li>Middle</li>
</ul>
<script>
const list = document.getElementById("list");
const first = document.createElement("li");
first.textContent = "First";
list.prepend(first);
const last = document.createElement("li");
last.textContent = "Last";
list.append(last);
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try before instead:
Change list.prepend(first) to list.before(first) and see it jump outside the list.
Important Points
appendadds inside at the end.prependadds inside at the start.beforeandafteradd outside as siblings.- Appending an existing element moves it rather than copying it.
insertAdjacentHTMLplaces markup without rebuilding the element.
Conclusion
These methods give you precise control over where new content appears.
The key question is always whether you want it inside or beside the target.
Moving elements by re-appending them is a genuinely useful trick.