New:Embedded & IoT Bootcamp
Codenexium.com
Tutorial 7 of 11 in series

Modifying the Document

Create, insert, remove, and replace DOM elements dynamically

Abhishek Sharma 2026-06-10 Web Development / Frontend / JavaScript DOM / Document
64%

Modifying the Document

JavaScript lets you create, insert, remove, and replace elements on the fly. This is the heart of dynamic web pages.

Creating Elements

const div = document.createElement('div');      // create element
const text = document.createTextNode('Hello');  // create text node
const comment = document.createComment('note'); // create comment
Demo: Creating Elements
HTML 
<div id='create-area'></div>
JavaScript 
const area = document.getElementById('create-area');

// Create a heading
const h3 = document.createElement('h3');
h3.textContent = 'Dynamically created!';

// Create a paragraph
const p = document.createElement('p');
p.textContent = 'This element was created with JavaScript.';

// Create a styled box
const box = document.createElement('div');
box.style.cssText = 'background:#eef2ff;padding:12px;border-radius:6px;border-left:4px solid #6366f1;';
box.textContent = 'Styled box created on the fly';

// Append all to the area
area.appendChild(h3);
area.appendChild(p);
area.appendChild(box);
Live Output Window

Insertion Methods

Method What it does
parent.appendChild(child) Appends child to end of parent
parent.prepend(child) Inserts child at beginning
parent.before(child) Inserts before the parent
parent.after(child) Inserts after the parent
childA.replaceWith(childB) Replaces childA with childB
Demo: Insertion Methods
HTML 
<ul id='insert-demo'>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div style='margin-top:8px;'>
<button id='btn-append'>Append</button>
<button id='btn-prepend'>Prepend</button>
<button id='btn-before'>Before First</button>
<button id='btn-after'>After Last</button>
<button id='btn-replace'>Replace First</button>
<button id='btn-remove'>Remove Last</button>
</div>
JavaScript 
const ul = document.getElementById('insert-demo');

function createLi(text) {
const li = document.createElement('li');
li.textContent = text;
return li;
}

document.getElementById('btn-append').onclick = () =>
ul.appendChild(createLi('Appended'));
document.getElementById('btn-prepend').onclick = () =>
ul.prepend(createLi('Prepended'));
document.getElementById('btn-before').onclick = () =>
ul.firstElementChild.before(createLi('Before'));
document.getElementById('btn-after').onclick = () =>
ul.lastElementChild.after(createLi('After'));
document.getElementById('btn-replace').onclick = () => {
if (ul.firstElementChild)
ul.firstElementChild.replaceWith(createLi('Replaced!'));
};
document.getElementById('btn-remove').onclick = () => {
if (ul.lastElementChild)
ul.lastElementChild.remove();
};
Live Output Window

insertAdjacentHTML / insertAdjacentText

These methods insert HTML or text at specific positions without creating elements first:

element.insertAdjacentHTML(position, htmlString);
element.insertAdjacentText(position, textString);

Positions: beforebegin, afterbegin, beforeend, afterend

<!-- beforebegin -->
<div>
<!-- afterbegin -->
  existing content
<!-- beforeend -->
</div>
<!-- afterend -->
Demo: insertAdjacentHTML
HTML 
<div id='adj-demo' style='border:2px dashed #6366f1;padding:8px;border-radius:6px;'>
Existing content
</div>
<pre id='adj-output' style='background:#f1f5f9;padding:8px;border-radius:4px;'></pre>
JavaScript 
const demo = document.getElementById('adj-demo');

demo.insertAdjacentHTML('beforebegin', '<p><strong>beforebegin</strong></p>');
demo.insertAdjacentHTML('afterbegin', '<p><em>afterbegin</em> - before existing</p>');
demo.insertAdjacentHTML('beforeend', '<p><em>beforeend</em> - after existing</p>');
demo.insertAdjacentHTML('afterend', '<p><strong>afterend</strong></p>');
Live Output Window

Cloning Nodes

Use cloneNode() to duplicate elements:

const clone = element.cloneNode(true);  // deep clone (includes children)
const clone = element.cloneNode(false); // shallow clone (no children)
Demo: Cloning Nodes
HTML 
<div id='clone-demo'>
<div class='card' style='background:#eef2ff;padding:12px;border-radius:6px;'>
Original card with <strong>bold text</strong>
</div>
</div>
<button id='clone-btn'>Clone Card</button>
JavaScript 
document.getElementById('clone-btn').onclick = function() {
const original = document.querySelector('.card');
const clone = original.cloneNode(true);
clone.style.background = '#fef9c3';
clone.insertAdjacentText('afterbegin', '[CLONE] ');
original.after(clone);
};
Live Output Window

DocumentFragment

For batched insertions, use a DocumentFragment. It’s a lightweight container that doesn’t trigger re-renders until inserted:

Demo: DocumentFragment
HTML 
<ul id='frag-demo'></ul>
<button id='frag-btn'>Add 100 Items (efficient)</button>
JavaScript 
document.getElementById('frag-btn').onclick = function() {
const ul = document.getElementById('frag-demo');
const fragment = document.createDocumentFragment();

for (let i = 1; i <= 100; i++) {
const li = document.createElement('li');
li.textContent = 'Item ' + i;
fragment.appendChild(li);
}

ul.appendChild(fragment);
this.disabled = true;
this.textContent = 'Done! 100 items added';
};
Live Output Window

Key Takeaways

  • Use createElement + textContent for safe element creation
  • appendChild / prepend / before / after / replaceWith / remove cover all insertion patterns
  • insertAdjacentHTML is great when you have raw HTML strings
  • Use cloneNode(true) for deep copies
  • DocumentFragment batches DOM changes for performance

Keep learning

Related tutorials from across the library.

All tutorials
Tutorial2026-06-10

Browser Environment & Specs

Understand the JavaScript browser environment - window, DOM, BOM, and ECMAScript

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM
Tutorial2026-06-10

DOM Tree

Understand the DOM tree - how browsers represent HTML as a document tree

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM
Tutorial2026-06-10

Walking the DOM

Navigate the DOM tree using parent, child, and sibling properties

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM