CODEWITHSUNDEEP
javascripthtml
Rikard
Rikard

Reputation: 167

Change content of a div using JavaScript

How to dynamically change content of a div using JavaScript?

Upvotes: 15

Views: 74259

Answers (4)

varun
varun

Reputation: 1

$(document).ready(function(){

$('#btn').click(function(){   

    $('#div_content').load('html.page');

 });
});

Upvotes: -2

donohoe
donohoe

Reputation: 14123

Its worth noting that you can also use innerHTML to include other markup. Also if the DIV des not have an ID you can try using getElementsByTagName.

Example, to get the first DIV in the document:

document.getElementsByTagName("div")[0].innerHTML = "<p>This is a <span>new</span> paragraph</p>";

This allows you to loop through multiple DIVs in the document and check other conditions.

And like they said above, if the DIV has an ID that you know will always be there, then thats better to use:

document.getElementById("theID").innerHTML = "<p>This is a <span>new</span> paragraph</p>";

Check out Prototype (links below) (or jQuery) in handling this as they make life easier, especially when you get into CSS selectors:

Upvotes: 3

Carlos Blanco
Carlos Blanco

Reputation: 8762

document.getElementById("divId").innerHTML = "new content!"

I would recommend using a framework like jQuery though, because chances are you will be doing more things like this later.

Upvotes: 8

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

This should do it:

<div id="foo">Div you want to change</div>

And in JavaScript:

document.getElementById('foo').innerHTML = 'Your content';

Upvotes: 26

Related Questions