DOM元素的innerHTML属性
阅读原文时间:2021年04月20日阅读:1

所有流行的浏览器的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 >

下面是主要的JS代码:

< script type = " text/javascript " > function  addDivTextByInnerHtml(el,text) {             el.innerHTML  += "

" +  text  + "
" ;         }                   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>