DOM节点深度克隆函数cloneNode()用法实例

最新推荐文章于 2024-05-23 08:50:15 发布

原创最新推荐文章于 2024-05-23 08:50:15 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dom #cloneNodeBoolean

Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍并演示了如何使用cloneNode()函数进行DOM节点的深度克隆，并将其应用于实际场景中，例如复制一个包含多个子元素的节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。

<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<div id="copyul">
</div>
<hr />
<button onclick="t()"value="">指定位置增加节点</button>


<script type="text/javascript">
function t() {
var nodeul = document.getElementsByTagName('ul')[0];//获取需要复制的UL节点
var newul = nodeul.cloneNode(true);//true表示深度复制，即边下边的li和文本也一起；如果是false，则只复制ul

var node_copy = document.getElementById('copyul');
node_copy.appendChild(newul);
}
</script>