I am working on a script that retrieves a list of jargon terms from an XML file, finds the term in a HTML document and then wraps the terms it finds in links that open a div wit ha definition of the term embedded. Inside the XML there are HTML fragments that I want to insert. My problem is how to easily extract the HTML from within the XML for use. Here's an example of the XML:



<?xml version="1.0" encoding="UTF-8"?>
<jargon>
<jargonterm id="3lcd" term="3LCD">
<description>
<p>
3LCD is the most widely used projection technology system in the world. This is how 3LCD technology works: white light is split into red, green, and blue using two mirrors that transmit light with a certain wavelength.
</p>
<p>
Each colour is then passed through a dedicated LCD, before being combined with the other colors in a prism. The image is then ready to be projected onto the screen.
</p>
</description>
</jargonterm>
<jargonterm id="ansi_Lumens" term="ANSI Lumens">
<description>
<p>
ANSI lumens is a measurement of the overall brightness of a projector. Because the centre of a projected image is brighter than the corners, ANSI lumens is the most accurate representation of the image brightness. ANSI lumens are calculated by dividing a square meter image into 9 equal rectangles, measuring the lux (or brightness) reading at the centre of each rectangle, and averaging these nine points.
</p>
</description>
</jargonterm>
</jargon>


Here's the code that does the link insersion and which also needs to extract the HTML fragments from inside the <description> nodes. as you can probably guess it's fired by an AJAX event.



function getJargon (xmlObject)

// Get jargon terms
{
// Check that we actually have a valid response to process
if (xmlObject.readyState == 4)
{
// Check for successful completion of HTTP session
if (xmlObject.status == 200)
{
// Parse the returned XML
xmlItems = xmlObject.responseXML;
if (xmlItems.getElementsByTagName('jargon')[0])
{
xmlRoot = xmlItems.documentElement;
// Get the jargon terms
if (xmlTerms = xmlRoot.getElementsByTagName ('jargonterm'))
{
// Grab the content div for processing``
testData = document.getElementById ('content');
// Set up Regular Expression
searchRegExp = new RegExp ('', '');
// Iterate over jargon term nodes
for (thisTerm = 0; thisTerm < xmlTerms.length; thisTerm++)
{
if (thisDesc = xmlTerms[thisTerm].getElementsByTagName ('description')[0])
// Create an entry for this item in the jargonTerms array
{
jargonTerms [xmlTerms[thisTerm].getAttribute ('id')] = '<p>This is the entry for ' + xmlTerms[thisTerm].getAttribute ('id') + '</p>';
}
// Find the term in the content div and replace it with a link
searchRegExp.compile (xmlTerms[thisTerm].getAttribute ('term'), 'ig');
testData.innerHTML = testData.innerHTML.replace (searchRegExp, '<a class="jargonbuster" href="#" onclick="return (jargonDiv (\'' + xmlTerms[thisTerm].getAttribute ('id') + '\'));">$&</a>');
}
}
else
{
// No jargon terms
}
}
else
{
// Malformed response
}
}
else
{
// Server error of some sort
}
}
else
{
// Still waiting for operation to complete
}
}


The function that actually displays the data is as follows:



function jargonDiv (selectedTerm)

// Manage the jargon buster div
{
// If the div is already visable, then hide it
try
{
document.body.removeChild (this);
}
catch (e) {}
// Update div contents
ajaxNode.innerHTML = jargonTerms [selectedTerm];
// Update div position
ajaxNode.style.left = (mouseX - 100).toString () + 'px';
ajaxNode.style.top = (mouseY + 2).toString () + 'px';
// Show the div
document.body.appendChild (ajaxNode);
return (false);
}


Does anyone know how to do this in a simple fashion?