change html contents via javascript

Question

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

Probably what you need: http://stackoverflow.com/questions/2554149/html-javascript-change-div-content — Tudor, Dec 09 '11 at 15:52

score 3 · Answer 1 · answered Dec 09 '11 at 15:54

3

You need to modify your HTML a bit first so the content you want to swap out is contained in a single element that is easily selectable (for example wrap a div with a unique class name or id around just the stuff you want to swap out). Then do something like this:

document.getElementById('whateverIdYouGaveTheDiv').innerHTML = "blah blah blah";

answered Dec 09 '11 at 15:54

Dagg Nabbit

75,346
19
113
141

thats fine with p element but how can i execute that if i would change this

Teffi

Dec 09 '11 at 16:06

I guess you would put it in a function and then call that function instead of doing nothing where you have `javascript:void(0);` ... although generally I think using the `javascript:` URI scheme is considered bad form... – Dagg Nabbit Dec 09 '11 at 16:10

ah.well i just got that from a jqzoom plugin. i just keep tweaking them. do you know how can i do the function for it? – Teffi Dec 09 '11 at 16:17

score 2 · Answer 2 · answered Dec 09 '11 at 15:55

2

maybe you can try jQuery template.

or, change the html when the trigger is clicked by using .click() and .html()

like:

var target_html = "something you want";

$('#trigger').click(function() {
    $("#content").html(target_html);
});

answered Dec 09 '11 at 15:55

Ya Zhuang

4,652
31
40

i think doing that will just be the same as linking the page and still i have to create a bunch of html pages. isnt it? – Teffi Dec 09 '11 at 16:03
I just checked your site, i think, query template is perfect to you. you can write all your content into a JSON object, and render them by the template engine. – Ya Zhuang Dec 09 '11 at 16:14

score 0 · Accepted Answer · answered Dec 09 '11 at 22:11

Personally, I'd make a div "card" for each of your carousel options containing any images or text you want to go with them. Then I'd set all of them but the first to display: none;. When another link in the carousel is clicked, I'd cycle through the "cards," setting them all to display: none except the one needed (which should have the same number in the order of cards as the carousel item you selected in the order of carousel items), which will be display: block; so that I don't have to store HTML into Javascript variables.

thanks. I think this is the simplest solution and still works out perfectly. i'll be sticking to div styling. — Teffi, Dec 11 '11 at 13:20

change html contents via javascript

3 Answers3