Appending Elements to the DOM in JS: Full Guide

Learn every way to append elements to the DOM in JavaScript. Master appendChild, append, prepend, insertBefore, insertAdjacentElement, and after with practical examples.

JavaScriptbeginner

RuneHub Team

February 28, 2026

10 min read

RuneHub Team

Feb 28, 2026

10 min read

After creating HTML elements with JavaScript, you need to insert them into the page. JavaScript provides multiple methods for adding elements at different positions in the DOM tree: as the last child, as the first child, before a specific sibling, or after one. Each method has different capabilities and browser support nuances. This guide covers every insertion method with clear examples showing exactly where each one places the new element.

appendChild: The Classic Method

The appendChild method adds a node as the last child of a parent element. It is the oldest and most widely used insertion method.

javascript

const list = document.getElementById("todo-list");
 
// Create a new list item
const newItem = document.createElement("li");
newItem.textContent = "Buy groceries";
 
// Append as the last child
list.appendChild(newItem);

How appendChild Works

javascript

// Before: <ul id="list"><li>Item 1</li><li>Item 2</li></ul>
 
const list = document.getElementById("list");
const item3 = document.createElement("li");
item3.textContent = "Item 3";
 
list.appendChild(item3);
 
// After: <ul id="list"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

Return Value

The appendChild method returns the appended node, which is useful for chaining:

javascript

const list = document.getElementById("list");
 
// appendChild returns the appended element
const newItem = list.appendChild(document.createElement("li"));
newItem.textContent = "New item";
newItem.classList.add("highlight");

Moving Elements with appendChild

If the node you pass to appendChild is already in the DOM, it gets moved (not cloned):

javascript

// Before:
// <div id="source"><p id="movable">Hello</p></div>
// <div id="target"></div>
 
const paragraph = document.getElementById("movable");
const target = document.getElementById("target");
 
target.appendChild(paragraph);
 
// After:
// <div id="source"></div>
// <div id="target"><p id="movable">Hello</p></div>
// The paragraph MOVED from source to target

append: The Modern Alternative

The append method is a newer, more flexible version of appendChild. It can accept multiple arguments and can append strings (as text nodes) directly.

javascript

const container = document.getElementById("container");
 
// Append multiple elements at once
const h2 = document.createElement("h2");
h2.textContent = "Section Title";
 
const p = document.createElement("p");
p.textContent = "Section content.";
 
container.append(h2, p); // Both added at once
 
// Append text strings directly (creates text nodes)
container.append("Some text ", "and more text");
 
// Mix elements and strings
const link = document.createElement("a");
link.href = "/help";
link.textContent = "help page";
 
container.append("Visit our ", link, " for more info.");

appendChild vs append Comparison

Feature	appendChild	append
Accepts elements	Yes (one at a time)	Yes (multiple at once)
Accepts strings	No	Yes (auto-creates text nodes)
Return value	Returns appended node	Returns undefined
Multiple nodes	Must call multiple times	Single call
Browser support	All browsers (IE6+)	Modern browsers (no IE)

javascript

// appendChild: one element at a time
parent.appendChild(element1);
parent.appendChild(element2);
parent.appendChild(document.createTextNode("text"));
 
// append: all at once
parent.append(element1, element2, "text");

prepend: Insert as First Child

The prepend method inserts nodes at the beginning of a parent element, before any existing children.

javascript

const list = document.getElementById("notifications");
 
// Add a new notification at the top
const notification = document.createElement("div");
notification.className = "notification new";
notification.textContent = "New message received";
 
list.prepend(notification);

javascript

// Before: <ul><li>Old Item 1</li><li>Old Item 2</li></ul>
 
const list = document.querySelector("ul");
const newItem = document.createElement("li");
newItem.textContent = "New First Item";
 
list.prepend(newItem);
 
// After: <ul><li>New First Item</li><li>Old Item 1</li><li>Old Item 2</li></ul>

prepend Accepts Strings and Multiple Arguments

javascript

const heading = document.querySelector("h1");
 
// Prepend an icon before the heading text
const icon = document.createElement("span");
icon.className = "icon";
icon.textContent = "📌 ";
 
heading.prepend(icon);
// Before: <h1>My Title</h1>
// After:  <h1><span class="icon">📌 </span>My Title</h1>
 
// Prepend multiple items
const container = document.getElementById("content");
container.prepend(
  document.createElement("hr"),
  "Important notice: ",
  document.createElement("br")
);

before and after: Sibling Insertion

The before and after methods insert nodes as siblings rather than children. They go right before or right after the element you call them on.

javascript

const referenceItem = document.getElementById("item-3");
 
// Insert before the reference element (as a previous sibling)
const newBefore = document.createElement("li");
newBefore.textContent = "Inserted Before Item 3";
referenceItem.before(newBefore);
 
// Insert after the reference element (as a next sibling)
const newAfter = document.createElement("li");
newAfter.textContent = "Inserted After Item 3";
referenceItem.after(newAfter);

javascript

// Before: <ul><li id="a">A</li><li id="b">B</li><li id="c">C</li></ul>
 
const b = document.getElementById("b");
 
const x = document.createElement("li");
x.textContent = "X";
b.before(x);
 
const y = document.createElement("li");
y.textContent = "Y";
b.after(y);
 
// After: <ul><li>A</li><li>X</li><li id="b">B</li><li>Y</li><li>C</li></ul>

before and after Accept Strings

javascript

const emphasis = document.querySelector("em");
 
emphasis.before("This is ");
emphasis.after(" important text.");
 
// Before: <p><em>very</em></p>
// After:  <p>This is <em>very</em> important text.</p>

insertBefore: Position-Specific Insertion

The insertBefore method on a parent element inserts a node before a specified reference child:

javascript

const parent = document.getElementById("list");
const referenceNode = document.getElementById("item-3");
 
const newNode = document.createElement("li");
newNode.textContent = "Inserted Before Item 3";
 
// Syntax: parent.insertBefore(newNode, referenceNode)
parent.insertBefore(newNode, referenceNode);

Insert at the Beginning Using insertBefore

javascript

const parent = document.getElementById("list");
 
const newFirst = document.createElement("li");
newFirst.textContent = "New First Item";
 
// Insert before the first child
parent.insertBefore(newFirst, parent.firstChild);
 
// If referenceNode is null, insertBefore acts like appendChild
parent.insertBefore(newFirst, null); // Appends to the end

insertAdjacentElement: Four-Position Insertion

The insertAdjacentElement method gives you four precise insertion positions relative to an element:

javascript

const target = document.getElementById("reference");
const newElement = document.createElement("div");
newElement.textContent = "New Element";
 
// Four positions:
target.insertAdjacentElement("beforebegin", newElement); // Before target (sibling)
target.insertAdjacentElement("afterbegin", newElement);  // First child of target
target.insertAdjacentElement("beforeend", newElement);   // Last child of target
target.insertAdjacentElement("afterend", newElement);    // After target (sibling)

Visual Diagram of Positions

javascript

// <!-- beforebegin -->
// <div id="target">
//   <!-- afterbegin -->
//   existing content
//   <!-- beforeend -->
// </div>
// <!-- afterend -->
 
const target = document.getElementById("target");
 
// "beforebegin": insert as previous sibling
const before = document.createElement("p");
before.textContent = "Before the div";
target.insertAdjacentElement("beforebegin", before);
 
// "afterbegin": insert as first child
const firstChild = document.createElement("p");
firstChild.textContent = "First inside the div";
target.insertAdjacentElement("afterbegin", firstChild);
 
// "beforeend": insert as last child (like appendChild)
const lastChild = document.createElement("p");
lastChild.textContent = "Last inside the div";
target.insertAdjacentElement("beforeend", lastChild);
 
// "afterend": insert as next sibling
const after = document.createElement("p");
after.textContent = "After the div";
target.insertAdjacentElement("afterend", after);

javascript

const element = document.getElementById("target");
 
// Insert parsed HTML (careful with user input!)
element.insertAdjacentHTML("beforeend", "<strong>Bold text</strong>");
 
// Insert plain text (safe, no HTML parsing)
element.insertAdjacentText("beforeend", "Plain text content");

Complete Method Comparison

Method	Position	Accepts Strings	Accepts Multiple	Returns	IE Support
`appendChild(node)`	Last child	No	No	Appended node	Yes
`append(...nodes)`	Last child	Yes	Yes	undefined	No IE
`prepend(...nodes)`	First child	Yes	Yes	undefined	No IE
`before(...nodes)`	Previous sibling	Yes	Yes	undefined	No IE
`after(...nodes)`	Next sibling	Yes	Yes	undefined	No IE
`insertBefore(node, ref)`	Before reference child	No	No	Inserted node	Yes
`insertAdjacentElement(pos, el)`	4 positions	No	No	Inserted element	Yes

Best Practices

1. Use DocumentFragment for Multiple Insertions

javascript

// SLOW: Multiple DOM writes
const list = document.getElementById("list");
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 100 reflows!
}
 
// FAST: Single DOM write with fragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // 1 reflow

2. Pick the Right Method for the Job

javascript

const container = document.getElementById("container");
const reference = document.getElementById("item-5");
 
// Add to the end: append or appendChild
container.append(newElement);
 
// Add to the beginning: prepend
container.prepend(newElement);
 
// Add before a specific element: before or insertBefore
reference.before(newElement);
// or: container.insertBefore(newElement, reference);
 
// Add after a specific element: after
reference.after(newElement);

3. Prefer append Over appendChild

javascript

// Modern code: use append
container.append(heading, paragraph, button, "some text");
 
// Legacy code or when you need the return value: use appendChild
const appended = container.appendChild(element);

Common Mistakes to Avoid

Mistake 1: Appending the Same Element Twice

javascript

const item = document.createElement("li");
item.textContent = "Hello";
 
// WRONG expectation: item appears in both lists
list1.appendChild(item);
list2.appendChild(item); // MOVES item from list1 to list2!
 
// CORRECT: Clone for multiple insertions
list1.appendChild(item);
list2.appendChild(item.cloneNode(true)); // Separate copy

Mistake 2: Losing Event Listeners When Moving Elements

javascript

const button = document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", () => console.log("Clicked!"));
 
container1.appendChild(button);
 
// Moving preserves event listeners
container2.appendChild(button); // Listener still works!
 
// But innerHTML destroys them
container2.innerHTML = container1.innerHTML; // Listener LOST!

Mistake 3: Using insertBefore Without the Parent

javascript

// WRONG: insertBefore is called on the PARENT, not the reference
referenceNode.insertBefore(newNode); // TypeError!
 
// CORRECT: Call on the parent element
referenceNode.parentNode.insertBefore(newNode, referenceNode);
 
// EASIER: Use the before() method on the reference itself
referenceNode.before(newNode);

Mistake 4: Forgetting null Check

javascript

// WRONG: querySelector returns null if not found
const ref = document.querySelector(".nonexistent");
ref.before(newElement); // TypeError: Cannot read properties of null
 
// CORRECT: Always check for null
const ref2 = document.querySelector(".target");
if (ref2) {
  ref2.before(newElement);
}

Real-World Example: Sortable Task List

javascript

function createSortableTaskList(containerId) {
  const container = document.getElementById(containerId);
  const list = container.querySelector(".task-list");
  const input = container.querySelector(".task-input");
  const addBtn = container.querySelector(".add-task-btn");
 
  function createTaskElement(text, priority) {
    const li = document.createElement("li");
    li.className = `task-item priority-${priority}`;
    li.draggable = true;
 
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.className = "task-checkbox";
    checkbox.addEventListener("change", () => {
      li.classList.toggle("completed", checkbox.checked);
    });
 
    const label = document.createElement("span");
    label.className = "task-label";
    label.textContent = text;
 
    const actions = document.createElement("div");
    actions.className = "task-actions";
 
    const upBtn = document.createElement("button");
    upBtn.textContent = "Up";
    upBtn.className = "btn-move";
    upBtn.addEventListener("click", () => {
      const prev = li.previousElementSibling;
      if (prev) {
        prev.before(li); // Move above previous sibling
      }
    });
 
    const downBtn = document.createElement("button");
    downBtn.textContent = "Down";
    downBtn.className = "btn-move";
    downBtn.addEventListener("click", () => {
      const next = li.nextElementSibling;
      if (next) {
        next.after(li); // Move below next sibling
      }
    });
 
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.className = "btn-delete";
    deleteBtn.addEventListener("click", () => {
      li.classList.add("removing");
      setTimeout(() => li.remove(), 300);
    });
 
    actions.append(upBtn, downBtn, deleteBtn);
    li.append(checkbox, label, actions);
 
    return li;
  }
 
  function addTask() {
    const text = input.value.trim();
    if (!text) return;
 
    const priority = container.querySelector('[name="priority"]:checked')?.value || "medium";
    const task = createTaskElement(text, priority);
 
    // Insert based on priority
    if (priority === "high") {
      // High priority goes to the top
      const firstNonHigh = list.querySelector(".task-item:not(.priority-high)");
      if (firstNonHigh) {
        firstNonHigh.before(task);
      } else {
        list.append(task);
      }
    } else if (priority === "low") {
      // Low priority goes to the bottom
      list.append(task);
    } else {
      // Medium priority goes after high, before low
      const firstLow = list.querySelector(".priority-low");
      if (firstLow) {
        firstLow.before(task);
      } else {
        list.append(task);
      }
    }
 
    // Update count
    updateCount();
    input.value = "";
    input.focus();
  }
 
  function updateCount() {
    const total = list.querySelectorAll(".task-item").length;
    const completed = list.querySelectorAll(".task-item.completed").length;
    container.querySelector(".task-count").textContent =
      `${completed}/${total} tasks completed`;
  }
 
  addBtn.addEventListener("click", addTask);
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") addTask();
  });
 
  // Observe completion changes
  list.addEventListener("change", updateCount);
}
 
createSortableTaskList("task-manager");

Rune AI

Key Insights

append vs appendChild: append accepts multiple nodes and strings; appendChild accepts one node and returns it
Position control: Use prepend for first child, append for last child, before/after for sibling positions, insertAdjacentElement for all four positions
Move, not clone: Appending an existing DOM node moves it; use cloneNode(true) to insert a copy
Batch with fragments: Always use DocumentFragment when inserting more than a handful of elements to minimize browser reflows
Modern API: Prefer append, prepend, before, and after over appendChild and insertBefore for cleaner, more readable code

Frequently Asked Questions

What is the difference between appendChild and append?

The `appendChild` method accepts only a single DOM node and returns the appended node. The `append` method accepts multiple arguments (both nodes and strings), inserts them all at once, and returns undefined. Use `append` for modern code where you need to add multiple items or mix elements with text. Use `appendChild` when you need the return value or must support Internet Explorer.

Does appendChild clone the element or move it?

It moves it. If the element already exists somewhere in the DOM, `appendChild` removes it from its current position and places it in the new location. This is the same behavior for all insertion methods (`append`, `prepend`, `before`, `after`, `insertBefore`). To insert a copy, use `element.cloneNode(true)` before appending.

How do I insert an element at a specific index position?

Get the child at the target index and use `insertBefore` or `before`: `parent.children[index].before(newElement)`. If the index equals the number of children, use `parent.append(newElement)` to add at the end. Always check that `parent.children[index]` exists before calling methods on it.

Is insertAdjacentElement faster than appendChild?

In benchmarks, `insertAdjacentElement` and `appendChild` perform similarly for single insertions. The real advantage of `insertAdjacentElement` is its four position options (`beforebegin`, `afterbegin`, `beforeend`, `afterend`) which let you insert relative to any element without needing a reference to its parent. For batch insertions, always use `DocumentFragment` regardless of which method you choose.

How do I append an element after a specific child?

Use the `after` method on the reference element: `referenceChild.after(newElement)`. Alternatively, use `insertBefore` with the reference's next sibling: `parent.insertBefore(newElement, referenceChild.nextSibling)`. If the reference is the last child, `nextSibling` is null and `insertBefore` appends to the end.

Conclusion

JavaScript provides a complete set of DOM insertion methods for every scenario. Use append as your default for adding elements to the end of a container, prepend for the beginning, and before/after for sibling-level positioning. When building lists or tables with many items, always batch your elements inside a DocumentFragment before inserting. Remember that all insertion methods move existing DOM nodes rather than copying them; use cloneNode(true) when you need duplicates. The modern methods (append, prepend, before, after) accept multiple arguments and strings, making them cleaner than the classic appendChild and insertBefore for most use cases.

Appending Elements to the DOM in JS: Full Guide

appendChild: The Classic Method

How appendChild Works

Return Value

Moving Elements with appendChild

append: The Modern Alternative

appendChild vs append Comparison

prepend: Insert as First Child

prepend Accepts Strings and Multiple Arguments

before and after: Sibling Insertion

before and after Accept Strings

insertBefore: Position-Specific Insertion

Insert at the Beginning Using insertBefore

insertAdjacentElement: Four-Position Insertion

Visual Diagram of Positions

Related Methods: insertAdjacentHTML and insertAdjacentText

Complete Method Comparison

Best Practices

1. Use DocumentFragment for Multiple Insertions

2. Pick the Right Method for the Job

3. Prefer append Over appendChild

Common Mistakes to Avoid

Mistake 1: Appending the Same Element Twice

Mistake 2: Losing Event Listeners When Moving Elements

Mistake 3: Using insertBefore Without the Parent

Mistake 4: Forgetting null Check

Real-World Example: Sortable Task List

Rune AI

Frequently Asked Questions

What is the difference between appendChild and append?

Does appendChild clone the element or move it?

How do I insert an element at a specific index position?

Is insertAdjacentElement faster than appendChild?

How do I append an element after a specific child?

Conclusion

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation