DOM Append Text and Element Functions

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

These two essential Javascript functions allow a web page designer to append text or new elements (nodes) to 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.

Append Functions

This example page contains two javascript append functions. One for appending text to an existing element (node), appendText. The other function, appendElement, appends a new element to an existing element.
<html>

  <head>

    <script>

      function appendText(node,txt)
      {
        node.appendChild(document.createTextNode(txt));
      }

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }

    </script>
   
    </head>

  <body>

    <h1>HunBug DOM Append Text and Element Functions</h1>

    <input type="button" value="Append Text"    onclick="appendText(document.getElementById('d2'),'... Appended Text');"/>
    <input type="button" value="Append Element" onclick="appendElement(document.getElementById('d2'),'div','','! Appended Div Element !');"/>

    <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

The appendText function has two parameters:
  • node: The element/node that the text is to be appended to.
  • txt: The text to append to the node.

In this`example the appendText function is used to add text to the element "d2".
appendText(document.getElementById('d2'),'... Appended Text');

The appendElement function has four parameters:
  • node: The element/node that the new element is to be appended to.
  • tag: The tag type for the element to be added
  • 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 appendElement function is used to add a new div element to the existing "d2" element. The new div would not have a specified id but would have inner html.
appendElement(document.getElementById('d2'),'div','','! Appended Div Element !');

Function Test

Each line in the function test below are div elements. Both of the buttons append to the middle div.


"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."

Appending to the End of the Page

If you wish to add directly to the end of the page, you need to append to the body element.

appendText(body,'... Appended Text');
or
appendElement(body,'div','','Appended Div Element');

Further Reading

Mozilla Developer Center: DOM:element.appendChild
HunBug: More essential Javascript functions to insert new DOM elements before or after existing elements
HunBug Store








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