常用/出现的情形:
比如我们做轮播图,要根据图片数动态生成与之数量对应的小圆点。又比如有些时候我们需要在js中为Dom添加节点方便操作......
用到如下几个方法:
node.cloneNode()
node.cloneNode(true)
parent.appendChild
<ul>
<li>aaa</li>
</ul>
我们先在HTML中写一个ul标签,ul标签里面有一个li标签。先在我们想再鼎泰生成一个li标签。
话不多少,看代码:
浅拷贝(只复制克隆标签,不克隆标签内部内容/属性以及内部子节点)
node.cloneNode()
<script>
var ul =document.querySelector('ul')
var li = document.querySelector('ul li')
var lis = li.cloneNode(); //复制克隆节点
ul.appendChild(lis) //追加到父节点
</script>
我们来看下结果:
我们再做一些改动,试着完成深拷贝
深拷贝(复制克隆标签,同事可以克隆标签内部内容/属性以及内部子节点)
node.cloneNode(true)
var ul =document.querySelector('ul')
var li = document.querySelector('ul li')
var lis = li.cloneNode(true); //括号里面有true就是深拷贝
ul.appendChild(lis) //追加到父节点
我们来看下结果:
看到这里你懂了吗?
keleinclude_原创,转载请标明出处,否则谢绝转载谢谢!