当前位置：网站首页>Cloning and importing DOM nodes

Cloning and importing DOM nodes

2022-06-25 06:39:00 【InfoQ】

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=&quot;container&quot;>
 <div class=&quot;header&quot;> This is the head </div>
 <div class=&quot;body&quot;>
 <div class=&quot;content&quot;> Content of a </div>
 <div class=&quot;content&quot;> Content of the two </div>
 </div>
 </div>

 <script>
 const target = document.querySelector(&quot;.body&quot;);
 const cloneNode1 = target.cloneNode();
 console.log(&quot;cloneNode1.outerHTML\n\n&quot;,cloneNode1.outerHTML);
 const cloneNode2 = target.cloneNode(true);
 console.log(&quot;cloneNode2.outerHTML\n\n&quot;, 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=&quot;container&quot;>
 <div class=&quot;header&quot;> This is a  Iframe  Content header </div>
 <div class=&quot;body&quot;> This is a  Iframe  Content subject </div>
 </div>
</body>

<!--index.html-->
<body>
 <div id=&quot;container&quot;>
 <div class=&quot;header&quot;> Content header </div>
 <div class=&quot;body&quot;> Content subject </div>
 </div>
 <iframe id=&quot;iframe_ele&quot; src=&quot;./iframe.html&quot;></iframe>

 <script>
 window.onload = function () {
 const iframeEle = document.getElementById('iframe_ele');
 const iframeContainer = iframeEle.contentDocument.getElementById(&quot;container&quot;);
 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=&quot;container&quot;>
 <div class=&quot;header&quot;> This is a  Iframe  Content header </div>
 <div class=&quot;body&quot;> This is a  Iframe  Content subject </div>
 </div>
</body>

<!--index.html-->
<body>
 <div id=&quot;container&quot;>
 <div class=&quot;header&quot;> Content header </div>
 <div class=&quot;body&quot;> Content subject </div>
 </div>
 <iframe id=&quot;iframe_ele&quot; src=&quot;./iframe.html&quot;></iframe>

 <script>
 window.onload = function () {
 const iframeEle = document.getElementById('iframe_ele');
 const iframeContainer = iframeEle.contentDocument.getElementById(&quot;container&quot;);
 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 ！

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202201236120543.html