javascript如何實現複製克隆一個dom元素節點

admin發表於2017-03-31
JavaScript

本章節通過程式碼例項介紹一下如何利用javascript克隆一個dom元素節點。

看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  var newLi=lis[0].cloneNode(true);
  obox.appendChild(newLi);
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來</li>
  <li>本站的網站地址是softwhy.com</li>
  <li>每一天那都是新的，要好好珍惜。</li>
  <li>當前的時間是最實在的，下一秒都是虛幻的</li>
</ul>
</body>
</html>

上面的程式碼實現了克隆第一個li元素的效果，並且追加到ul元素的後部。

相關閱讀:

1.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

2.cloneNode()方法可以參閱javascript cloneNode()一章節。

3.appendChild()方法可以參閱javascript appendChild()一章節。

相關文章