JavaScript Inserting Elements

Written by Swapnil RajaPublished 24 Aug 2026

append, prepend, before and after decide 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

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);

PreviousJavaScript Creating Elements NextJavaScript Removing Elements

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);

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);

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);

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);

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>

JavaScript Inserting Elements

Example

The Four Positions

Syntax

Inside or Outside

Example

Appending Text

Example

Moving an Existing Element

Example

insertAdjacentHTML

Example

Adding Several at Once

Example

Complete Example

Try It Yourself

Important Points

Conclusion