码迷,mamicode.com
首页 > Web开发 > 详细

js如何动态为指定的元素添加内容

时间:2016-01-08 07:00:34      阅读:361      评论:0      收藏:0      [点我收藏+]

标签:

js如何动态为指定的元素添加内容:
在实际应用中要根据代码的执行情况来动态的创建一个元素,然后添加到指定的元素,下面就通过一个简单的实例简单的介绍一下如何实现此效果,代码实例如下:

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>js如何动态为指定的元素添加内容-蚂蚁部落</title> 
<script type="text/javascript"> 
var timer=null;
var append=null;
function util()
{ 
  var elm=function()
  { 
    return document.getElementById("thediv"); 
  } 
  var createtxt=function()
  { 
    var textNode=document.createTextNode("蚂蚁部落"); 
    var divNode=document.createElement("div"); 
    divNode.appendChild(textNode); 
    return divNode; 
  } 
  this.done=function(){ 
    elm().appendChild(createtxt()); 
  } 
} 
window.onload=function()
{
  var bt=document.getElementById("bt");
  bt.onclick=function(){clearInterval(timer)}
   
  append=new util(); 
  timer=setInterval(function(){
  append.done()
    
  },1000); 
}
</script> 
</head> 
<body> 
  <div id="thediv"></div> 
  <input type="button" id="bt" value="停止添加"/>
</body> 
</html> 

 

以上代码可以不简单的为thediv添加div对象,当点击停止添加就可以停止此动作,下面介绍一下此效果的实现原理:
一.实现原理:
1.关于创建元素节点可以使用document.createElement()函数,参数是标签名称。
2.关于创建文本节点可以使用document.createTextNode()函数,参数是文本内容。
3.为元素追加内容可以使用appendChild()函数。
二.相关阅读:
1.关于节点操作可以参阅javascript的节点相关内容介绍一章节。
2.setInterval()函数可以参阅setInterval()函数用法详解setInterval()第一个参数带引号和不带引号的区别一章节。
3.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9257

更多内容可以参阅:http://www.softwhy.com/javascript/

 

js如何动态为指定的元素添加内容

标签:

原文地址:http://www.cnblogs.com/come-on/p/5111839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!