js如何動態為指定的元素新增內容

antzone發表於2017-03-14
JS

在實際應用中要根據程式碼的執行情況來動態的建立一個元素，然後新增到指定的元素，下面就通過一個簡單的例項簡單的介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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.setInterval()函式可以參閱setInterval()一章節。

2.clearInterval()函式可以參閱window clearInterval()一章節。

相關文章