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>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值