JAVASCRIPT
Insert Elements at Specific Positions (before, after, prepend, append)
Master advanced DOM insertion methods like `insertBefore`, `insertAdjacentElement`, `prepend`, and `after` to precisely control element placement within a parent or relative to siblings.
const parentElement = document.getElementById('listContainer');
const referenceChild = document.getElementById('item2'); // An existing child in 'listContainer'
// Create new elements
const newFirstItem = document.createElement('li');
newFirstItem.textContent = 'New Item (Prepended)';
const newBeforeItem = document.createElement('li');
newBeforeItem.textContent = 'New Item (Inserted Before Item 2)';
const newAfterItem = document.createElement('li');
newAfterItem.textContent = 'New Item (Inserted After Item 2)';
const newLastItem = document.createElement('li');
newLastItem.textContent = 'New Item (Appended)';
// 1. Prepend: Insert as the first child of the parent
if (parentElement) {
parentElement.prepend(newFirstItem);
}
// 2. Insert Before: Insert before a specific reference child
if (parentElement && referenceChild) {
parentElement.insertBefore(newBeforeItem, referenceChild);
}
// 3. Insert After: Insert after a specific reference child (using element.after())
if (referenceChild) {
referenceChild.after(newAfterItem);
}
// 4. Append: Insert as the last child of the parent (similar to appendChild)
if (parentElement) {
parentElement.append(newLastItem);
}
How it works: This snippet showcases various methods for inserting elements at precise locations within the DOM. `prepend()` adds an element as the first child of a parent. `insertBefore(newNode, referenceNode)` places `newNode` directly before `referenceNode`. The more modern `element.after(newNode)` inserts `newNode` immediately after `element`. Finally, `append()` adds an element as the last child, similar to `appendChild()`, but it can accept multiple DOM nodes or strings.