所有流行的浏览器的DOM元素都支持一种叫做innerHTML的属性。
这个属性最大的好处在于：它允许我们利用一种非常简单的方式来为元素分配内容。
下面我们来举个例子
实际的应用中，经常需要动态改变div的内容，我们知道，div是可以嵌套的，那么怎么动态地嵌套呢？
我们举个增加名字列表的简单例子。
网页代码如下：
<
div
>
姓名:
< input type ="text" id ="txtName" name ="txtName" />
< input type ="button" name ="btnAdd" value ="增加" onclick ="addName('txtName','nameList');" />
< input type ="button" name ="btnClear" value ="清空" onclick ="clearName('nameList');" />
< br />
名字列表:
< div id ="nameList" ></ div >
</ div >
姓名:
< input type ="text" id ="txtName" name ="txtName" />
< input type ="button" name ="btnAdd" value ="增加" onclick ="addName('txtName','nameList');" />
< input type ="button" name ="btnClear" value ="清空" onclick ="clearName('nameList');" />
< br />
名字列表:
< div id ="nameList" ></ div >
</ div >
下面是主要的JS代码：
<
script type
=
"
text/javascript
"
>
function addDivTextByInnerHtml(el,text) {
el.innerHTML += " <div> " + text + " </div> " ;
}
function addName(nameId,listId) {
var nameList = document.getElementById(listId);
var name = document.getElementById(nameId).value;
addDivTextByInnerHtml(nameList,name);
}
function clearName(listId) {
var nameList = document.getElementById(listId);
nameList.innerHTML = "" ;
}
< / script>
function addDivTextByInnerHtml(el,text) {
el.innerHTML += " <div> " + text + " </div> " ;
}
function addName(nameId,listId) {
var nameList = document.getElementById(listId);
var name = document.getElementById(nameId).value;
addDivTextByInnerHtml(nameList,name);
}
function clearName(listId) {
var nameList = document.getElementById(listId);
nameList.innerHTML = "" ;
}
< / script>
