js動態在一個元素中新增另一個元素

admin發表於2017-03-15
JS

在實際應用中可能需要根據需要動態的建立一個元素，然後再將這個元素新增到指定的元素中，下面就通過程式碼例項簡單介紹一下如何實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>為DOM節點新增元素-螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var newDiv=document.createElement("div");
  var txtNode=document.createTextNode("螞蟻部落歡迎您");
  newDiv.appendChild(txtNode);
  obox.appendChild(newDiv);
}
</script> 
</head> 
<body> 
<div id="box"></div>
</body> 
</html>


本帖最後由 antzone 於 2016-3-11 23:16 編輯



js動態在一個元素中新增另一個元素:

在實際應用中可能需要根據需要動態的建立一個元素，然後再將這個元素新增到指定的元素中，下面就通過程式碼例項簡單介紹一下如何實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>為DOM節點新增元素-螞蟻部落</title> 

<script type="text/javascript"> 

window.onload=function()

{

  var obox=document.getElementById("box");

  var newDiv=document.createElement("div");

  var txtNode=document.createTextNode("螞蟻部落歡迎您");

  newDiv.appendChild(txtNode);

  obox.appendChild(newDiv);

}

</script> 

</head> 

<body> 

<div id="box"></div>

</body> 

</html> 


以上程式碼實現實現了我們的要求下面簡單對此做一下簡單介紹:

var obox=document.getElementById("box")可以獲得id屬性值為box的div物件。

var newDiv=document.createElement("div")再建立一個新的div物件。

var txtNode=document.createTextNode("螞蟻部落歡迎您")建立一個文字節點物件。

newDiv.appendChild(txtNode);將文字節點物件新增到新的div物件。

obox.appendChild(newDiv)，將新的div新增到box中去。

相關閱讀:

1.createElement()函式可以參閱js createElement()一章節。

2. 文字節點可以參閱javascript如何建立一個文字節點一章節。 

相關文章