jq、js克隆clone()、cloneNode()方法

代码克隆常用在无缝轮播的效果上,本文简要介绍关于jq和原生js的两个克隆属性:

jq、clone()克隆

clone() 方法生成被选元素的副本,包含子节点、文本和属性。

jq中提供的clone()属于深度克隆,克隆时包含了所有子节点的文本和属性。

举例来说:

<div id="test">
<p>六月初博客站
<a href="https://www.xuexiareas.com" target="_blank">点击进入</a>
</p>
</div>

当你使用:

$("#test").clone()

它不仅仅会克隆id为test这个标签,还会将他子标签的所有属性文本都克隆。最后得到的和例子中一模一样的代码。

js、cloneNode()

cloneNode() 方法可创建指定的节点的精确拷贝 

语法:node.cloneNode(deep)

deep为布尔值:可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。 

该方法为js的原生方法。

还是以上方例子,说明:

var nods = document.getElementById("test");
//深度克隆,会将包含id为test在内的所有子标签的文本和属性全部克隆
nods.cloneNode(true)
//只克隆id为test该标签的文本和属性
nods.cloneNode()

注:在日常的使用中,多数都是用的深度克隆。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!