DOM節(jié)點深度克隆函數(shù)cloneNode()用法實例

更新時間：2015年01月12日 11:11:10 投稿：shichen2014

這篇文章主要介紹了DOM節(jié)點深度克隆函數(shù)cloneNode()用法,實例分析了cloneNode()函數(shù)深度復制的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了DOM節(jié)點深度克隆函數(shù)cloneNode()用法。分享給大家供大家參考。

具體實現(xiàn)方法如下：

<html>

<head>

<script type="text/javascript">

function t(){ 

 var nodeul = document.getElementsByTagName('ul')[0];//獲取需要復制的UL節(jié)點

 var newul = nodeul.cloneNode(true);//true表示深度復制，即邊下邊的li和文本也一起；如果是false，則只復制ul

 var node_copy = document.getElementById('copyul');

 node_copy.appendChild(newul);

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li>春天</li>

  <li>夏天</li>

  <li>秋天</li>

  <li>冬天</li>

 </ul>

</div>

<div id="copyul">

</div>

<hr />

<button onclick="t()" value="">指定位置增加節(jié)點</button>

</body>

</html>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

實例詳解帶參數(shù)的 npm script
本文通過實例代碼給大家介紹了帶參數(shù)的 npm script，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
JavaScript運行過程中的“預編譯階段”和“執(zhí)行階段”
這篇文章主要介紹了JavaScript運行過程中的“預編譯階段”和“執(zhí)行階段”的相關資料,需要的朋友可以參考下
2015-12-12
抽出www.templatemonster.com的鼠標懸停加載大圖模板的代碼
抽出www.templatemonster.com的鼠標懸停加載大圖模板的代碼...
2007-07-07
JavaScript實現(xiàn)圖片滑動切換的代碼示例分享
這篇文章主要介紹了JavaScript實現(xiàn)圖片滑動切換的代碼示例分享,能夠控制包括滑動時間和切換數(shù)量等,需要的朋友可以參考下
2016-03-03
小程序中實現(xiàn)獲取全部數(shù)據(jù)的圖文教程
最近在開發(fā)中遇到了一個需求,需要獲取小程序的全部數(shù)據(jù),所以這篇文章主要給大家介紹了關于小程序中實現(xiàn)獲取全部數(shù)據(jù)的相關資料,需要的朋友可以參考下
2022-11-11
JS+CSS實現(xiàn)簡單滑動門(滑動菜單)效果
這篇文章主要介紹了JS+CSS實現(xiàn)簡單滑動門(滑動菜單)效果,通過JavaScript響應鼠標事件動態(tài)設置頁面元素樣式實現(xiàn)滑動菜單功能,需要的朋友可以參考下
2015-09-09
js獲取瀏覽器的可視區(qū)域尺寸的實現(xiàn)代碼
js獲取瀏覽器的可視區(qū)域尺寸的實現(xiàn)代碼，需要的朋友可以參考下。
2011-11-11
BootStrap智能表單demo示例詳解
這篇文章主要介紹了BootStrap智能表單demo示例詳解的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
JS對URL字符串進行編碼/解碼分析
節(jié)約時間，先寫出總結(jié)，推薦使用encodeURIComponent()來對URL進行編碼。
2008-10-10
跟我學習javascript的call(),apply(),bind()與回調(diào)
跟我學習javascript的call(),apply(),bind()與回調(diào)，感興趣的小伙伴們可以參考一下
2015-11-11