DOM InsetBefore and InsertAfter Functions

A HunBug Document
Document No.: 11440
Last Updated: 01 Feb 2008
Author: HunBug

These two essential Javascript functions allow a web page designer to insert new elements (nodes) before or after existing elements within the page. Every web developers toolkit of library functions should contain this, or similar, functions. Modify it to suit your needs and keep it to hand.

Insert Functions

This example page contains two javascript insert functions. The addElementBefore function is for inserting a new element in front of a specified element. The addElementAfter function is for inserting a new element after the specified element.
<html>

  <head>

    <script>

      function addElementBefore(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.parentNode.insertBefore(ne,node);
      }

      function addElementAfter(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.parentNode.insertBefore(ne,node.nextSibling);
      }

    </script>

  </head>

  <body>

    <h1>DOM InsetBefore and InsertAfter Functions</h1>

    <input type="button" value="before1" onclick="addElementBefore(document.getElementById('d1'),'div','','Before 1');"/>
    <input type="button" value="before2" onclick="addElementBefore(document.getElementById('d2'),'div','','Before 2');"/>
    <input type="button" value="before3" onclick="addElementBefore(document.getElementById('d3'),'div','','Before 3');"/>
    <input type="button" value="after1" onclick="addElementAfter(document.getElementById('d1'),'div','','After 1');"/>
    <input type="button" value="after2" onclick="addElementAfter(document.getElementById('d2'),'div','','After 2');"/>
    <input type="button" value="after3" onclick="addElementAfter(document.getElementById('d3'),'div','','After 3');"/>

    <div id="d1">"Uncle!" pleaded the nephew.</div>
    <div id="d2">"Nephew!" returned the uncle, sternly, "keep Christmas in your own way, and let me keep it in mine."</div>
    <div id="d3">"Keep it!" repeated Scrooge's nephew.  "But you don't keep it."</div>
   
  </body>

</html> 

How it Works

Both functions accept four parameters:
  • node: The element/node that the text is to be inserted before/after.
  • tag: The tag type for the element to be inserted
  • id: Optional parameter to specify an id for the element
  • htm: Optional parameter to specify the internal html for the element.
In this example the addElementBefore function is used to insert a new DIV element, without an id, before the element "d1".
addElementBefore(document.getElementById('d1'),'div','','Before 1');
The addElementAfter is called in the same way. In this example a new DIV element is inserted, without an id, after the element "d1".
addElementAfter(document.getElementById('d1'),'div','','After 1');

The addElementBefore function uses the Javascript insertBefore function to insert the new element.

As there is no insertAfter function in Javascript (don't ask me why!), the addElementAfter function again uses the insertBefore function but this time references the next element "node.nextSibling".  So the function technically inserts before the element after the specified element, rather than inserts directly after the specified element. A technicality.

Function Test

A test based on the example above. Each line below are DIV elements and the buttons insert before or after as indicated


"Uncle!" pleaded the nephew.
"Nephew!" returned the uncle, sternly, "keep Christmas in your own way, and let me keep it in mine."
"Keep it!" repeated Scrooge's nephew. "But you don't keep it."

Further Reading

Mozilla Developer Center: DOM:element.insertBefore
HunBug: More essential Javascript functions to append text or new elements to existing elements
HunBug Store








Comments are all individually read, none are automatically posted to the site.