Preface
In the use of JS operation DOM Node time , We often use cloning （ Or import ） Node operation , Then what methods can be used to realize node cloning （ Or import ） The effect of ？
today , Let's summarize that node cloning can be realized （ Or import ） The method of effect .
node.cloneNode()
Mention clone node , The first thing we can think of must be node.cloneNode() Method .
grammar
The syntax is as follows ：
let cloneNode = targetNode.cloneNode(deep);- cloneNode The node copy generated by the final Clone .
- targetNode The target node to be cloned .
- deep Optional parameters , Indicates whether deep cloning is required , That is, whether you need to clone targetNode Child nodes under , The default is false.
give an example ：
<body>
<div id="container">
<div class="header"> This is the head </div>
<div class="body">
<div class="content"> Content of a </div>
<div class="content"> Content of the two </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 operation results are as follows ：
document.importNode()
Copy a node of the external document , You can then insert the copied node into the current document . The grammar is as follows ：
let node = document.importNode(externalNode, deep);- node The node object imported externally into the current document .
- externalNode The target node to be imported in the external document .
- deep Deep copy or not , The default is false.
give an example ：
<!--iframe.html-->
<body>
<h1> This is a Iframe page </h1>
<div id="container">
<div class="header"> This is a Iframe Content header </div>
<div class="body"> This is a Iframe Content subject </div>
</div>
</body>
<!--index.html-->
<body>
<div id="container">
<div class="header"> Content header </div>
<div class="body"> Content subject </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 end result is as follows ：
document.adoptNode()
From other document Get a node in the document . This node and all nodes on its subtree are deleted from the original document ( If you have this node ), And its ownerDocument The property becomes the current document file . Then you can insert this node into the current document . grammar ：
let node = document.adoptNode(externalNode);- node Node object obtained from external document .
- externalNode The node object in the external document to be imported .
give an example ：
<!--iframe.html-->
<body>
<h1> This is a Iframe page </h1>
<div id="container">
<div class="header"> This is a Iframe Content header </div>
<div class="body"> This is a Iframe Content subject </div>
</div>
</body>
<!--index.html-->
<body>
<div id="container">
<div class="header"> Content header </div>
<div class="body"> Content subject </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 ：
summary
The above is the use of JS clone （ Or import ）DOM Method summary of node .
~
~ The end of this paper , Thank you for reading ！
~
Learn interesting knowledge , Make interesting friends , Create interesting souls ！
Hello everyone , I am a 〖 The samadhi of programming 〗 The author of Hermit King , My official account is 『 The samadhi of programming 』, Welcome to your attention , I hope you can give me more advice ！
