dom操作新增一個帶有文字的節點程式碼例項

antzone發表於2017-03-26

在實際應用中，可能會有這樣的操作，那就是給指定的元素中新增一個元素，並且此元素中含有指定的文字內容，下面就通過程式碼例項介紹一下如何實現此效果，實現此效果的方式有多種，下面介紹一下比較常用的兩種。

實現方式一:

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

上面的程式碼實現了我們的要求，可以在div元素中新增一個h1元素並制定h1中的內容。

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

2.createTextNode()函式可以參閱document.createTextNode()一章節。

實現方式二:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var oh=document.createElement("h1"); 
  var obox=document.getElementById("box"); 
  obox.innerHTML="<h1>螞蟻部落</h1>"
}
</script> 
<body> 
<div id="box"></div> 
</body> 
</html>

上面的方式同樣可以實現我們的要求。

innerHTML屬性可以參閱js innerHTML一章節。

相關文章