使用JavaScript更改div的内容

Question

如何使用JavaScript动态更改div的内容？

Answer 1

This should do it:

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

And in JavaScript:

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

Answer 2

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

我建议使用像jQuery这样的框架，因为你很可能会在以后做更多这样的事情。

Answer 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:

• http://api.prototypejs.org/dom/dollar.html
• http://api.prototypejs.org/dom/dollardollar.html
• http://api.prototypejs.org/dom/element.html#select-class_method

Answer 4

$(document).ready(function(){

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

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

 });
});