JavaScript: How to Insert an Element After a Reference Element (Custom putAfter)

We are going to create a helper function like jQuery after(...) or insertAfter(...).

Because jQuery already claimed insertAfter, we'll use other term for the function name. Let's call it putAfter.

In this, we actually will implement insertBefore method.

It goes like this:

/** * Inserts a new DOM node after a specified reference node. * * @param {Node} newNode - The new node to be inserted into the DOM. * @param {Node} referenceNode - The reference node after which the new node will be inserted. * @throws {Error} Throws an error if the reference node does not have a parent. * * This function: * - Traverses sibling nodes to skip non-element nodes (e.g., #text or comments). * - Ensures the new node is placed after the reference node, * or at the end of the parent node's child list if no valid next sibling is found. * * Example Boolean Logic for `while` loop: * - `nextElement && nextElement.nodeType !== Node.ELEMENT_NODE` evaluates as: * - true AND true = Continue iteration (next element is not valid). * - true AND false = Stop (found a valid element node). * - false AND true = Stop (no more siblings, end reached). * - false AND false = Stop (no siblings left). */ function putAfter(newNode, referenceNode) { const parent = referenceNode.parentNode; if (!parent) { throw new Error("Reference node has no parent!"); } let nextElement = referenceNode.nextSibling; // Traverse until we find the next element node or reach the end while (nextElement && nextElement.nodeType !== Node.ELEMENT_NODE) { nextElement = nextElement.nextSibling; } // Insert before the found node, or append at the end if null parent.insertBefore(newNode, nextElement); }

---

How to Use

// Define the helper function here or some other place // function putAfter(...) or const putAfter = ... and so forth // Assuming you are creating a DIV here const newDiv = document.createElement("div"); newDiv.id = "new_div_id"; newDiv.className = "new_div_class_name"; newDiv.style.cssText = "background: red; height: 24px;"; // This is the reference element you know it exists on the HTML const myReferenceElement = document.getElementById("myReferenceElement"); // Now we can invoke the helper function putAfter(newDiv, myReferenceElement);

That's all. Thanks for visiting.

---

References

• insertBefore(...) method on MDN
• jQuery documentations:
  • after(...) method documentation
  • insertAfter(...) method documentation
• nodeType property and Node.ELEMENT_NODE: node type reference on MDN