1. Home
  2. How-to Articles
  3. How to Create an addChild() Function in JavaScript

How to Create an addChild() Function in JavaScript

  • google plus

In Brief...

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.

Take our Ajax Training course for free.

See the Course Outline and Register

Instructions

  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

Need Ajax Training?

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.

Categories

Courses

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.

Discuss