Again, we're still working with the people.xml file we created in the second lesson. As always, the first thing you'll want to do is load the file into your browser. 

var http = loadXMLDoc("people.xml");

This is especially important in this lesson, as all functions that create nodes will require the http variable in order to function properly.

Our first chore is to create a new person. This entails a laundry list of things: creating 3 nodes (person, name, age), creating 2 text nodes (for name and age), and setting an attribute (the name's prefix attribute). So let's begin by creating our person node. 

var newNode = http.createElement("person");

Simple enough. You'll first see the http variable. This variable must be a reference to the document into which you'll eventually be inserting the node. Next is the createElement function. It creates a node with the name of its parameter; in this case "person". Next, we'll create the other two nodes and the two text nodes. 

var nameNode = http.createElement("name");
var ageNode = http.createElement("age");
var nameNodeText = http.createTextNode("Jane Smith");
var ageNOdeText = http.createTextNode("37");

As you can see, their nomenclature is somewhat inconsistent; they jump between elements and nodes pretty randomly. Anyways, the new function here is createTextNode. The http thing applies here as well, and the parameter will be the text that the node contains. Now let's fit all these nodes into a single node. 

nameNode.appendChild(nameNodeText);
ageNode.appendChild(ageNodeText);
newNode.appendChild(ageNode);
newNode.appendChild(nameNode);

The appendChild function is affixed to the end of a reference to whatever node you wish to be the parent. You can see that nameNode and ageNode are the parents of their respective text nodes, and newNode is the parent of ageNode and nameNode. Oops! We got the age and name reversed. Not the end of the world by any means, but for consistency, let's fix this. We'll first remove nameNode, and then we'll squeeze it back into it's proper place in the flow of the document. 

newNode.removeNode(nameNode);
newNode.insertBefore(nameNode,ageNode);

With the removeNode function, you can set it equal to a variable if you want to keep a reference to the node you're removing, but since we already have a reference (nameNode) that the removeNode function does *not* break, we don't need it. The insertBefore function takes two arguments. The first one is the node you're inserting, and the second one is the node before which the first parameter is being inserted. Now we just need to set our attribute and we're golden. 

nameNode.setAttribute("prefix","Mrs");

That can't be all, can it? Yep, that's all it takes! The setAttribute function inserts the attribute right into the node to which it is affixed. The first parameter is the attribute name, the second is the attribute value. The last step in this whole thing is to add this nice, shiny new node to our entire document. 

http.documentElement.appendChild(nameNode);

The parent here will be the people node, which is the document root (obtained via documentElement). Tah dah! Your node has officially been inserted into the structure of the document. Remember, though, that this does NOT affect the original people.xml file. Also note that all of these functions return references to the result -- that is, references to the node that was inserted or removed or created -- should you decide that you need them.

One thing that may not be immediately apparent is that these structures can be thought of as trees. If you cut off a branch, you take all branches and leaves that are attached to it. In the same way, if you remove a node, you're also removing all of its children and their children, etc. Likewise, if you add a node, you're also adding all of his or her children. Finally, if you, say, create a node, add it to the document, and later decide to add some children or an attribute to it, you can use that old reference, provided it still exists, and the changes will be reflected in the structure of the main document.

Next lesson, we'll learn how to apply this newly acquired XML knowledge to HTML files!