How to Replace Child Nodes in JavaScript

Delight your site visitors with pages that change before their eyes.

Nodes make it possible for Web pages to exist. Objects on a Web page, such as buttons, paragraphs and text are actually elements called "nodes." A parent "paragraph" node, for example, may contain a child node consisting of a span. Web developers combine different types of nodes on a page to create everything you see on the Internet. JavaScript enables you to replace child nodes with new ones. This gives you the ability to make Web pages morph and change in real time as users view your pages.

Instructions

1. Open your HTML document using an HTML editor or Notepad.

2. Add the following code to that document's "body" section:

   <p id="parent1">Text in the parent node

   <span id="child1">

   Original text in the child node

   </span>

   </p>

   <input id="Button1" type="button" value="button" onclick="return replaceChildNode()" />

   This creates a paragraph. Its id value is "parent1" and its text reads, "Text in the parent node." Inside this paragraph is a span whose id is "child1." This span is a child node of the paragraph. The text in this child node reads, "Original text in the child node." Using the "replaceChild" method, you will replace this child node with a new one containing different text. The button shown in the last line of code calls the JavaScript function that executes the "replaceChild" method.

3. Add the following JavaScript function named "replaceChildNode" to your document's "head" section:

   <script type="text/javascript">

   function replaceChildNode() {

   var newChild = document.createElement("span");

   var text = document.createTextNode("New text in a new child node");

   newChild.appendChild(text);

   var parent = document.getElementById("parent1");

   var child = document.getElementById("child1");

   var val = parent.replaceChild(newChild, child);

   }

   </script>

   The first line of code in the function creates a new child node named "newChild." It does that using the "createElement" method. This new child node is a "span" because" the code passes "span" to the "createElement" method. The next two lines of code add text to the span. That text reads, "New text in a new child node." The next two statements obtain references to the "parent1" and "child1" elements created in the body. Those are the paragraph and span elements. The final line of code executes the "replaceChild" method and replaces the original child node with the new one.

   </script>

4. Save your document and open it in a browser. You will see the paragraph text and text from the span below it. That text in the span reads, "Original text in the child node."

5. Click the button. The code runs and replaces the span with the new one created in the JavaScript function. The text below the paragraph changes to "New text in a new child node."

Tips & Warnings

• This example demonstrates replacing an existing child node with a new text node. Use the "replaceChild" node to replace existing nodes with other types of child nodes as well. For example, to replace the original child node with a new node consisting of a button, replace the first line in the function with this one: newChild = document.createElement("input"). Add the following line below that one to set its attribute type to "button": newChild.setAttribute("type", "button"). When the JavaScript function runs, it replaces the text "Original text in the child node" with a button instead of different text.

References

• Microsoft MSDN: ReplaceChild Method (A, ABBR, ACRONYM, ...)
• Dottoro: Createelement Method (Document, Xmldocument) Javascript

Resources

• JavaScript Kit: DOM Element Methods