Creating New Nodes

Contact Us or call 1-877-932-8228
Creating New Nodes

Creating New Nodes

The document node has separate methods for creating element nodes and creating text nodes: createElement() and createTextNode(). These methods each create a node in memory that then has to be placed somewhere in the object hierarchy. A new node can be inserted as a child to an existing node with that node's appendChild() and insertBefore() methods.

You can also use the appendChild() and insertBefore() methods to move an existing node - the node will be removed from its current location and placed at the new location (since the same node cannot exist twice in the same document).

These methods and some others are described in the table below.

Methods for Inserting Nodes
Method Description
appendChild() Takes a single parameter: the node to insert, and inserts that node after the last child node.
insertBefore() Takes two parameters: the node to insert and the child node that it should precede. The new child node is inserted before the referenced child node.
replaceChild() Takes two parameters: the new node and the node to be replaced. It replaces the old node with the new node and returns the old node.
setAttribute() Takes two parameters: the attribute name and value. If the attribute already exists, it replaces it with the new value. If it doesn't exist, it creates it.

The sample below illustrates how these methods work.

Code Sample:

HTMLDOM/Demos/InsertingNodes.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
observeEvent(window,"load",function() {
	var appendElem = document.getElementById("append");
	var prependElem = document.getElementById("prepend");
	var changeElem = document.getElementById("change-num");
	var replaceElem = document.getElementById("replace");
	observeEvent(appendElem,"click",appendNewListItem,false);
	observeEvent(prependElem,"click",prependNewListItem,false);
	observeEvent(changeElem,"click",changeStartNum,false);
	observeEvent(replaceElem,"click",replaceOlWithUl,false);
});

function appendNewListItem() {
	var li = document.createElement("li");
	var liText = document.createTextNode("New List Item");
	li.appendChild(liText);
	document.getElementById("first-list").appendChild(li);
}

function prependNewListItem() {
	var li = document.createElement("li");
	var liText = document.createTextNode("New List Item");
	var firstList = document.getElementById("first-list");
	li.appendChild(liText);
	firstList.insertBefore(li,firstList.firstChild);
}

function changeStartNum() {
	var firstList = document.getElementById("first-list");
	var start=firstList.getAttribute("start");
	if (start) {
		start++;
	} else {
		start=2;
	}
	firstList.setAttribute("start",start);
}

function replaceOlWithUl() {
	list = document.getElementById("first-list");
	list2 = document.getElementById("second-list");
	list.parentNode.replaceChild(list2,list);
	list = list2;
}
</script>
<title>Inserting Nodes</title>
</head>

<body>
<form id="menu">
	<button id="append" type="button">Append List Item</button>
	<button id="prepend" type="button">Prepend List Item</button>
	<button id="change-num" type="button">Change Start Number</button>
	<button id="replace" type="button">Replace ordered list with bulleted list</button>
</form>
<ol id="first-list">
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ol>
<hr>
<ul id="second-list">
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>
</body>
</html>

The page is shown below in a browser. Click on any of the menu items to see the methods in action. The unordered list will move when it replaces the ordered list, so it will then appear above the horizontal rule line.

As a coding practice, it is better to create a structure before inserting it into the page than to put the parent element in the page and then append to it. This saves the browser from unnecessary redrawing of the page as each child is added.

A Note on the setAttribute() Method

You can use the setAttribute() method to change the value of all attributes by name as you would expect with one exception. In Internet Explorer 8 and earlier, the class attribute must be referrred to as "className" in the setAttribute() method. This means that you shouldn't use setAttribute() for setting the class. Instead, change the className property.

node.className = "new-class-name";

Or you can use the addClass() function in our ClassFiles/lib.js file.

Next