change html contents via javascript

[saberExcalibur7]

How can I change the contents of my paragraph as well as the contents of my list once the link was clicked. reference: http://dummyproto.atspace.co.uk/

once i click woven badges on the navigation carousel i want to change the contents of the p as well as the imaged displayed. Is that possible via javascript? Is it a great alternative rather than creating a bunch of html pages for every page which has the same layout but different contents.

I’m looking forward to detailed solutions.Thanks

[mik3ca]

easiest way out for todays browsers is to label the element of the section that is supposed to change. Here’s an example of what I mean…

<div ID=”ABC”>change me</div>

So above, we want to change the text “change me”.

then in javascript, use commands like this:

var mystuff=getElementById(“ABC”);
mystuff.innerHTML=”<h2>changed</h2>”;

The first command (I may have missed an S or messed up on capitalization) will create a variable to hold an internal value which is the same as the DIV above.
The second command modifies the html data between “<div ID=”ABC”>” and “</div>”.

[mik3ca]

damn…. the code didnt work… ill try again…
just type all this in.

Text to change

Once this is run, you should see “Changed!”

[saberExcalibur7]

well that’s good. but how bout this? it aint simpy tags and text.

[Mottie]

Hi saberExcalibur7!

You’ll need to share a bit more information before we can help you. How are you planning on getting the new information? I’m guessing that when an item is clicked inside of the “.overview” window that you want the information inside of “#content” to update with the new item. And this new information is obtained via ajax?

Basically, once you get the new information, you can just target the “#content” div, as mik3ca shared, and replace everything inside of it. But you’ll also need to re-initialize the jqzoom plugin for the new image.

[workinclasshero]

Why not just use Ajax then you can just store all new content in a separate text file. Seems like the easiest way to me. Just use the XMLHttpRequest object.

[workinclasshero]

Actually just check out the jQuery .load method, that seems to be the best way, cheers:)

[Author]

Posts