15

How to dynamically change content of a div using JavaScript?

4 Answers 4

26

This should do it:

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

And in JavaScript:

document.getElementById('foo').innerHTML = 'Your content';
1
  • so does it mean you are going to write a simple js file which is going to run when for instance, a button is clicked? and can you also tell me how that can be done (I am sorry, I'm very new to javascript coz it sounds a little dumb to me, being a programmer) Mar 1, 2011 at 14:58
8

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.

1
  • 4
    +1 and a sidenote, if you don't want to affect the actual HTML inside and just want to change the text inside use .innerText instead. Feb 3, 2010 at 1:47
3

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:

-2
$(document).ready(function(){

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

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

 });
});
1
  • A little bit of details wouldn't hurt, but basically, yeah! Feb 8, 2014 at 3:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.