JAVASCRIPT
Inserting New Elements Before or After an Existing Element
Master inserting new HTML elements precisely before or after a specific reference element in the DOM using JavaScript's `insertBefore()` and `after()` / `before()` methods.
const insertElement = (referenceSelector, newElementHTML, position = 'after') => {
const referenceElement = document.querySelector(referenceSelector);
if (!referenceElement) {
console.error('Reference element not found.');
return null;
}
const tempDiv = document.createElement('div');
tempDiv.innerHTML = newElementHTML;
const newElement = tempDiv.firstElementChild; // Get the actual element from the temporary div
if (newElement) {
if (position === 'before') {
referenceElement.before(newElement); // Modern method
// Older browsers might need: referenceElement.parentNode.insertBefore(newElement, referenceElement);
} else if (position === 'after') {
referenceElement.after(newElement); // Modern method
// Older browsers might need: referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
} else {
console.warn('Invalid position. Use "before" or "after".');
}
return newElement;
} else {
console.error('Failed to create new element from HTML string.');
return null;
}
};
// Usage example:
// <p id="targetParagraph">This is the target paragraph.</p>
// insertElement('#targetParagraph', '<h2>New Heading Before</h2>', 'before');
// insertElement('#targetParagraph', '<p>New paragraph after.</p>', 'after');
How it works: This snippet provides a utility function to insert new HTML content either immediately before or after a specified reference element. It uses modern DOM methods like `before()` and `after()` for simplicity and readability, while also noting older browser compatibility for `insertBefore()`. This is useful for dynamically adjusting page layout.