appending and prepending elements

intro
with AJAX user interfaces becoming more and more popular, users are getting used to things happening in real time on websites. take, for example, leaving a comment on a blog post. clicking “post comment” can submit a form that your server language (php) can handle and then reload the page with the comment posted. however this makes the entire page reload, which can take up more time than necessary, not to mention server resources to rebuild the entire page’s content. enter, [intlink id="109" type="post"]XMLHttpRequest[/intlink] and a little AJAX fun….

scenario
let’s assume you already have your [intlink id="109" type="post"]XMLHttpRequest[/intlink] function written and that it sends information to a postComment() function that will add the comment to the blog post. once you gave gotten your responseXML from the request you want to add the comment to the list of existing comments in real time.

solution
create the div that contains the comments and make sure to give it a unique id:

<div id="comment_container">
    <p>comment 1</p>
    <p>comment 2</p>
</div>

then simply get the dom element of the container div so you can add the element from the responseXML:

var new_comment = request.responseXML;
var comments = document.getElementById("comment_container");

now you have to decide if you want to add the element to the top or the bottom of the list. if you are sorting the comments with the newest at the bottom, you want to append the new comment:

comments.appendChild(new_comment);

this will add the dom element to the end of the list, attaching it to the beginning is a little trickier. there is no prependChild() method in javascript. instead you will have to use the insertBefore() method:

comments.insertBefore(new_comment, comments.firstChild);

combine this with some cool graphic effects (like fading in the new comment) and you can start to create a really appealing interface for your users.

traversing the XML DOM

in one of my earlier posts about the i discussed how to bring in data via using the . i mentioned two ways of retrieving the information from an external file. the first was responseText and the other was responseXML. in this article i will demonstrate how to use the responseXML to retrieve information from an external xml file using the xml dom. (for this example lets assume you are using the xml example from the post, and that you have already returned the xml dom object and stored it in xmlDoc)

to get the information out of this file we will need to use getElementsByTagName. this will return an array containing all dom object that match the tag we reference:

var user = getElementsByTagName("user");

in the example we had 2 user elements. so the variable user now contains both those elements. now lets create a loop so we can cycle through all the elements a pull out whatever we need.

for (var i = 0; i < user.length; i++) {
}

now within the loop we need to add whatever code we want to retrieve the information we desire. lets say we want to grab the name and age tags. since these are childNodes of the user tag, we will add a second loop to cycle through all childNodes of the current user iteration.

	var child = user[i].childNodes;
	for (var j = 0; j < child.length; j++) {
	}

so now we are looping through every user element, and for each one we are then looping through all its childNodes. Now we can pull out the information withing the childNodes and display that information on the screen:

		document.write(child[j].firstChild.nodeValue);

the firstChild represents the text stored withing the element’s tags, however it doesn’t represent the value of the text, just the textNode itself. nodeValue represents the actual value of the textNode. so in plain english, that line of code is retrieving the child element, then getting the text node out of the element, retrieving the value of that text, and displaying it. if we put the whole code together it looks like this:

var user = getElementsByTagName("user");
for (var i = 0; i < user.length; i++) {
	var child = user[i].childNodes;
	for (var j = 0; j < child.length; j++) {
		document.write(child[j].firstChild.nodeValue);
	}
}

and will out put:

John Doe25Jane Smith28

with a little added formatting, or perhaps the use of some to create new elements, the text can be formatted and displayed in a slightly more appealing manor, but you get the point.