foreword
When using JS to manipulate DOM nodes, we often use the operation of cloning (or importing) nodes. What are the methods to achieve the effect of node cloning (or import)?
Today, we will summarize the methods that can achieve the effect of node cloning (or import).
node.cloneNode()
When it comes to cloning nodes, the first thing we can think of is the node.cloneNode() method.
grammar
Its syntax is as follows:
let cloneNode = targetNode.cloneNode(deep);- cloneNode Final clone generated node copy.
- targetNode The target node to be cloned.
- deep Optional parameter, indicating whether to perform deep cloning, that is, whether to clone the child nodes under targetNode, the default is false.
Example:
<body>
<div id="container">
<div class="header">这是头部</div>
<div class="body">
<div class="content">内容一</div>
<div class="content">内容二</div>
</div>
</div>
<script>
const target = document.querySelector(".body");
const cloneNode1 = target.cloneNode();
console.log("cloneNode1.outerHTML\n\n",cloneNode1.outerHTML);
const cloneNode2 = target.cloneNode(true);
console.log("cloneNode2.outerHTML\n\n", cloneNode2.outerHTML);
</script>
</body>The results are as follows:
document.importNode()
Copies a node of an external document, and then inserts the copied node into the current document. The syntax is as follows:
let node = document.importNode(externalNode, deep);- node A node object imported externally into the current document.
- externalNode The target node in the external document to be imported.
- deep Whether to deep copy, the default is false.
Example:
<!--iframe.html-->
<body>
<h1>这是 Iframe 页面</h1>
<div id="container">
<div class="header">这是 Iframe 内容头部</div>
<div class="body">这是 Iframe 内容主体</div>
</div>
</body>
<!--index.html-->
<body>
<div id="container">
<div class="header">内容头部</div>
<div class="body">内容主体</div>
</div>
<iframe id="iframe_ele" src="./iframe.html"></iframe>
<script>
window.onload = function () {
const iframeEle = document.getElementById('iframe_ele');
const iframeContainer = iframeEle.contentDocument.getElementById("container");
const importedNode = document.importNode(iframeContainer, true);
document.body.appendChild(importedNode);
}
</script>
</body>The final effect is as follows:
document.adoptNode()
Get a node from another document. The node and all nodes in its subtrees are removed from the original document (if there is one), and its ownerDocument attribute becomes the current document document. You can then insert this node into the current document. grammar:
let node = document.adoptNode(externalNode);- node The node object obtained from the external document.
- externalNode The node object in the external document to be imported.
Example:
<!--iframe.html-->
<body>
<h1>这是 Iframe 页面</h1>
<div id="container">
<div class="header">这是 Iframe 内容头部</div>
<div class="body">这是 Iframe 内容主体</div>
</div>
</body>
<!--index.html-->
<body>
<div id="container">
<div class="header">内容头部</div>
<div class="body">内容主体</div>
</div>
<iframe id="iframe_ele" src="./iframe.html"></iframe>
<script>
window.onload = function () {
const iframeEle = document.getElementById('iframe_ele');
const iframeContainer = iframeEle.contentDocument.getElementById("container");
const node = document.adoptNode(iframeContainer);
document.body.appendChild(node);
}
</script>
</body>Effect:
Summarize
The above is a summary of the methods of cloning (or importing) DOM nodes using JS.
~
~ This article is over, thanks for reading!
~
Learn interesting knowledge, meet interesting friends, and shape interesting souls!
Hello everyone, I'm King , the author of 〖 Programming Samadhi 〗, my public account is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。