JavaScript appendChild()

admin發表於2018-10-26
JavaScriptAPP

appendChild可以為指定元素在尾部追加一個子元素。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
target.appendChild(newChild)

引數解析:

（1）.target：必需，父元素節點。

（2）.newChild：必需，此元素節點將被追加到target中。

瀏覽器支援:

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=document.getElementsByTagName("li");
  let newLi=document.createElement("li");
  newLi.innerHTML="螞蟻部落五";
  obox.appendChild(newLi);
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body> 
</html>

上述程式碼可以將新建立的li元素追加到ul元素的尾部。

相關文章