How To Change An Image On A Site Using Xml Data & Jquery

I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of a

Solution 1:

As you already have the code that can extract the image URL information from the XML, which is

result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());

It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like

var root = $(xml).find("site[name='" + site + "']");
//get the image url from the xmlvar imageSrc=$(root).find("headerImage").text()
//get all the images in class .PageHeader, and change the src
$(".PageHeader img").attr("src",imageSrc) 

And it should work

Example

In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.