Video Presentation: Manipulating XML With jQuery 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Manipulating XML With jQuery</title>
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript">
 
		// When the DOM is ready, run the scripts.
		$(function(){
			// Build the base data XML object. We are building the
			// XML collection in this cause, but this could have
			// just as easily come from an AJAX call of type XML.
			var jData = $( "<data></data>" );
 
			// Output the info to the output.
			output( "Data Size: " + jData.size() );
 
 
			// ----------------------------------------------- //
 
 
			// Append a dataum node to the XML collection.
			jData.append(
				"<datum id='1'>\
					<name>Tricia</name>\
					<hair>Brunette</hair>\
				</datum>\n\
				<datum id='2'>\
					<name>Joanna</name>\
					<hair>Brunette</hair>\
				</datum>\n\
				<datum id='3'>\
					<name>Eva</name>\
					<hair>Blonde</hair>\
				</datum>"
				);
 
			// Query for all the datum nodes.
			var jDatum = jData.find( "datum" );
 
			// Output the size of the collection and the
			// HTML (XML) of the data node.
			output(
				("Datum Size: " + jDatum.size()),
				jData.html()
				);
 
 
			// ----------------------------------------------- //
 
 
			// Find Tricia's node. She is the datum record with
			// the id of 1.
			var jTricia = jDatum.filter( "[ id = 1 ]" );
 
			// Output tricia's node.
			output(
				"Tricia's Node",
				("ID: " + jTricia.attr( "id" )),
				jTricia.html()
				);
 
 
			// ----------------------------------------------- //
 
 
			// Find the blond girl in the node set.
			var jBlonde = jData.find(
				"datum:has(hair:contains('Blonde'))"
				);
 
			// Output the blonde node.
			output(
				"Blonde's Node",
				("ID: " + jBlonde.attr( "id" )),
				jBlonde.html()
				);
 
 
			// ----------------------------------------------- //
 
 
			// Blondes might have more fun, but not in my
			// programming world. Remove the blonde node from
			// its parent data set (the data node).
			jBlonde.remove();
 
			// Output the data node to see if blondie was
			// removed from the party.
			output(
				"Data (without Blondie):",
				jData.html()
				);
 
 
			// ----------------------------------------------- //
 
 
			// Let's rate the hottness of the remaining girls.
			// To start with, let's add a default attribute with
			// not value.
			jDatum.attr( "hotness", "unknown" );
 
			// Output the updated data set.
			output(
				"Data (with hotness attributes):",
				jData.html()
				);
 
 
			// ----------------------------------------------- //
 
 
			// Tricia is a total babe. If she were a children's
			// cereal, she'd be magically babelicious. As such,
			// let's take her existing node reference and update
			// the hotness attribute.
			jTricia.attr( "hotness", 10 );
 
			// Output the updated data set.
			output(
				"Data (with Tricia update):",
				jData.html()
				);
 
 
			// ----------------------------------------------- //
 
 
			// Even though we are dealing with an XML document
			// that is not rendered on the page, we can still
			// bind and trigger events on it.
			jData.bind(
				"hug",
				function( objEvent ){
					// Get the target node for the event.
					var jTarget = $( objEvent.target );
 
					// Check to see if the target node of the hug
					// event was a datum node (we don't care if
					// another node triggered this event).
					if (jTarget.is( "datum" )){
 
						// Output that the given girl node was
						// hugged (you sly dog you!).
						output(
							"Datum Node Hugged:",
							jTarget.html()
							);
 
					}
				}
				);
 
			// Trigger a hug event on Tricia.
			jTricia.trigger( "hug" );
 
 
			// ----------------------------------------------- //
 
 
			// We are done. Let's empty the data set.
			jData.empty();
 
			// At this point, we have completely disconnected the
			// Datum collection from the Data container. As such,
			// we shouldn't be able to access the parent node of
			// any of the datum nodes. To test this, try to grab
			// Tricia's parent.
			var jParent = jTricia.parent();
 
			// Output the parent collection size and the size of
			// data child collection.
			output(
				("Parent Size: " + jParent.size()),
				("Data Child Size: " + jData.children().size())
				);
 
		});
 
 
		// I output my arguments to the output, each on a new line
		// followed by an extra line break.
		function output(){
			var jOutput = $( "#output" );
 
			// Loop over arguments and output them.
			$.each(
				arguments,
				function( index, value ){
					// Clean the value.
					value = $.trim( value );
 
					// Remove tabs for demo.
					value = value.replace(
						new RegExp( "\\t+", "g" ),
						" "
						);
 
					// Remove all leading spaces.
					value = value.replace(
						new RegExp( "^\\s+", "gm" ),
						""
						);
 
					// Append to existing content.
					jOutput.val( jOutput.val() + value + "\n" );
				}
				);
 
			// Output an additional line break.
			jOutput.val(
				jOutput.val() +
				"\n-------------------------\n\n"
				);
		}
 
	</script>
</head>
<body>
 
	<h1>
		Manipulating XML With jQuery
	</h1>
 
	<form>
 
		<textarea
			id="output"
			style="width: 100% ; height: 400px ; font-size: 16px ;"
		></textarea>
 
	</form>
 
</body>
</html>

For Cut-and-Paste