parent.appendChild(newEl);       // append child
parent.insertBefore(new, ref);  // insert before reference
newEl.remove();                  // remove self (modern)

Deep Dive Course

The modern DOM API provides intuitive methods: **append()** adds content to end (accepts strings and nodes), **prepend()** to beginning, **before()**/**after()** relative to a sibling, **replaceWith()** replaces the element, and **remove()** deletes itself. These are much cleaner than the old `appendChild`/`insertBefore`/`removeChild` pattern.

1Understanding DOM Modification Methods

The modern DOM API provides intuitive methods: append() adds content to end (accepts strings and nodes), prepend() to beginning, before()/after() relative to a sibling, replaceWith() replaces the element, and remove() deletes itself. These are much cleaner than the old appendChild/insertBefore/removeChild pattern.

💡

Use document.createDocumentFragment() to batch-insert many elements. Fragment keeps them in memory until you do one DOM operation.

editor.html

// Modern DOM modification
const list = document.querySelector('ul');

const newItem = document.createElement('li');
newItem.textContent = 'New Item';

list.append(newItem);          // to end
list.prepend('First item');    // to beginning (string!)
newItem.before(document.createElement('li')); // sibling
newItem.remove();              // self-remove

localhost:3000

2Practical Example

Here is a real-world application of DOM Modification Methods showing how it is used in production JavaScript code.

editor.html

// DocumentFragment for batch insert
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.append(li);
}
list.append(fragment); // ONE DOM operation for all 1000

localhost:3000

3Best Practices

Follow these guidelines when working with DOM Modification Methods:

1. Use modern methods: append, remove, replaceWith, before, after

2. Use DocumentFragment for batch insertions

3. Clone elements with cloneNode(true) for deep copies

⚠️

Tip: Use document.createDocumentFragment() to batch-insert many elements. Fragment keeps them in memory until you do one DOM operation.

editor.html

// Modern DOM modification
const list = document.querySelector('ul');

const newItem = document.createElement('li');
newItem.textContent = 'New Item';

list.append(newItem);          // to end
list.prepend('First item');    // to beginning (string!)
newItem.before(document.createElement('li')); // sibling
newItem.remove();              // self-remove

localhost:3000

Examples

Example 01Basic Usage

// Modern DOM modification
const list = document.querySelector('ul');

const newItem = document.createElement('li');
newItem.textContent = 'New Item';

list.append(newItem);          // to end
list.prepend('First item');    // to beginning (string!)
newItem.before(document.createElement('li')); // sibling
newItem.remove();              // self-remove

Example 02Advanced Example

// DocumentFragment for batch insert
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.append(li);
}
list.append(fragment); // ONE DOM operation for all 1000

Best Practices

Use modern methods: append, remove, replaceWith, before, after
Use DocumentFragment for batch insertions
Clone elements with cloneNode(true) for deep copies

Interview Question

Why use DocumentFragment for batch DOM insertions?▼

Hint: Minimize layout reflows.

Every DOM insertion triggers layout recalculation (reflow) and potentially a repaint. Inserting 1000 items one-by-one causes 1000 reflows. A DocumentFragment is an in-memory container — you build the whole subtree in it, then do one insertion, causing only one reflow. This can be 100x faster for large batches.

Exercises

MediumPractice using DOM Modification Methods in a real scenario.

View Solution

// Modern DOM modification
const list = document.querySelector('ul');

const newItem = document.createElement('li');
newItem.textContent = 'New Item';

list.append(newItem);          // to end
list.prepend('First item');    // to beginning (string!)
newItem.before(document.createElement('li')); // sibling
newItem.remove();              // self-remove

Frequently Asked Questions

Why use DocumentFragment for batch DOM insertions?▼

Related Functions

Elements-CreationElements-ManipulationDelete-Elements