HTML DOM cloneNode() 方法
htmlweb developmentfront end technology更新于 2024/6/1 23:40:17
HTML DOM cloneNode() 方法用于创建给定节点的副本，并在该节点上调用 cloneNode() 方法并返回该副本。cloneNode() 方法会克隆给定节点的所有属性和值。
语法
以下是 cloneNode() 方法的语法 −
yourNode.cloneNode([deep])
其中，deep 是一个可选参数。将其值设置为 true，表示应克隆给定节点及其子节点及其属性和值;将其值设置为 false，表示仅复制给定节点及其属性和值，而不复制其子节点。
示例
让我们看一个 HTML DOM cloneNode() 方法的示例 −
<!DOCTYPE html>
<html>
<head>
<title>CLONE NODE</title>
<style>
h1{color:green;}
h2{ color:blue; }
</style>
</head>
<body>
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
<button onclick="CloneEle()"> CLONE </button>
<script>
function CloneEle() {
var x= document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击克隆按钮 −
在上面的例子中 −
我们创建了一个 div，其中包含 <h1< 和 <h2< 元素。<h1< 和 <h2< 元素有各自的样式。
h1{color:green;}
h2{ color:blue; }
<div id="DIV1">
<h1>标题 1</h1>
<h2> 标题 2</h2>
</div>
然后，我们创建了一个按钮 CLONE，当用户点击时，它将执行 CloneEle() 函数 −
<button onclick="CloneEle()"> CLONE </button>
CloneEle() 方法将使用 getElementById() 方法获取 div 元素并将其赋值给变量 x。然后，我们在 <div> 上使用参数 true 的 cloneNode(ture) 方法克隆该元素及其子元素，并将它们赋值给变量 clone。然后，使用 appendChild() 方法将 clone 变量附加到文档主体中 −
function CloneEle() {
var x= document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
