Insertion Methods in JS Insertion in JavaScript refers to adding elements, text, or HTML into the DOM using JavaScript. It allows you to dynamically update your webpage without reloading it.
Common DOM Insertion Methods
1. appendChild()
Adds a node to the end of a parent element.
<div id="container"></div>
<script>
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = "I'm appended!";
container.appendChild(newDiv);
</script>
Get a Specific Row by Index
let specificCell = table.rows[1].cells[1]; // Second row, second cell
console.log(specificCell.innerText);
2. insertBefore(newNode, referenceNode)
Inserts a new node before a specific child node.
<ul id="list">
<li>Item 1</li>
</ul>
<script>
const list = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = "Item 0";
const firstItem = list.firstElementChild;
list.insertBefore(newItem, firstItem);
</script>
3. append() – Modern
Can append nodes or text (unlike appendChild, which only takes nodes).
<div id="box"></div>
<script>
const box = document.getElementById('box');
box.append("Hello ", document.createElement("span"));
</script>
4. prepend()
Inserts content at the beginning of the element.
<div id="messages">Hi!</div>
<script>
const messages = document.getElementById('messages');
messages.prepend("Hello, ");
</script>
5. replaceChild(newNode, oldNode)
Replaces an existing child with a new one.
<div id="content"><p>Old paragraph</p></div>
<script>
const content = document.getElementById('content');
const newPara = document.createElement('p');
newPara.textContent = "New paragraph";
const oldPara = content.querySelector('p');
content.replaceChild(newPara, oldPara);
</script>
insertAdjacentHTML – The Star Player
Replaces an existing child with a new one.
element.insertAdjacentHTML(position, text);
Positions:
"beforebegin" – before the element itself.
"afterbegin" – inside the element, before its first child.
"beforeend" – inside the element, after its last child.
"afterend" – after the element itself.
<div id="card">
<p>Middle Content</p>
</div>
<script>
const card = document.getElementById('card');
card.insertAdjacentHTML("beforebegin", "<h2>Before Card</h2>");
card.insertAdjacentHTML("afterbegin", "<p>Top Inside</p>");
card.insertAdjacentHTML("beforeend", "<p>Bottom Inside</p>");
card.insertAdjacentHTML("afterend", "<h2>After Card</h2>");
</script>