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/
时间： 2024-09-28 21:56:20