• google plus

How to Create an addChild() Function in JavaScript

Adding nodes to the DOM with JavaScript can be a lot of work. It involves several steps, including:

  1. Creating a new element node.
  2. Appending the element node as a child of another element.
  3. Creating a new text node.
  4. Appending the text node to the new element node.
  5. Adding one or more attributes with the setAttribute() method of the new element.

The following explains how to create and use a function that will make the process of adding nodes to the DOM easier.

  1. Create a new file named addChild.js, containing the following function:
    function addChild(doc, parent, child, childText, attributes) {
    	if (typeof child == "string") {
    		childNode = doc.createElement(child);
    	} else {
    		childNode = child;
    	}
    	if (typeof childText == "string") {
    		childTextNode = doc.createTextNode(childText);
    		childNode.appendChild(childTextNode);
    	}
    	if (attributes) {
    		for (var att in attributes) {
    			childNode.setAttribute(att,attributes[att]);
    		}
    	}
    	parent.appendChild(childNode);
    	return childNode;
    }
  2. Create an HTML page and include the addChild.js file using a script element.
    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<script type="text/javascript" src="addChild.js"></script>
    
    	<title>Add Child Demo</title>
    </head>
    <body>
    <h1>Add Child Demo</h1>
    </body>
    </html>
    			
  3. Write a script in the HTML document that passes the three parameters that the addChild() function requires to it: the DOM document, parent-to-be node, and child-to-be.
    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<script type="text/javascript" src="addChild.js"></script>
    		<script type="text/javascript">
    		window.addEventListener("load", function () {
    			var atts = {
    				"style": "background:red;color:white;",
    				"align": "center"
    			};
    			addChild(document, document.getElementsByTagName("body")[0], "p",
    					"Hello World!", atts);
    
    		});
    	</script>
    	<title>Add Child Demo</title>
    </head>
    <body>
    <h1>Add Child Demo</h1>
    </body>
    </html>
  4. Save the HTML file and load it in a browser. The new node will be added to the web page, as shown below.
    Result of Using the addChild Function
Author: Chris Minnick
Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.
About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.