DOM元素的innerHTML属性

所有流行的浏览器的DOM元素都支持一种叫做innerHTML的属性。

这个属性最大的好处在于：它允许我们利用一种非常简单的方式来为元素分配内容。

下面我们来举个例子

实际的应用中，经常需要动态改变div的内容，我们知道，div是可以嵌套的，那么怎么动态地嵌套呢？

我们举个增加名字列表的简单例子。

网页代码如下：

< div >
    姓名:
     &nbsp;
     < input  type ="text"  id ="txtName"  name ="txtName"   />
     &nbsp;
     < input  type ="button"  name ="btnAdd"  value ="增加"  onclick ="addName('txtName','nameList');"   />
     &nbsp;
     < 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>