“This is my 33rd day of participating in the First Challenge 2022. For details: First Challenge 2022”

preface

When using JS to operate DOM nodes, we often use clone (or import) node operation, that in the end what methods can achieve node clone (or import) effect?

Today, we will summarize the methods that can achieve node cloning (or import) effect.

node.cloneNode()

When it comes to cloning nodes, the node.clonenode () method is certainly the first thing that comes to mind.

grammar

The syntax is as follows:

let cloneNode = targetNode.cloneNode(deep);
Copy the code
  • CloneNode The copy of the node generated by the final clone.
  • TargetNode the targetNode to be cloned.
  • This parameter is optional. Deep indicates whether deep cloning is required, that is, whether children under targetNode need to be cloned. The default value is false.

For 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>
Copy the code

The running results are as follows:

document.importNode()

Make a copy of a node of the external document, which can then be inserted into the current document. The syntax is as follows:

let node = document.importNode(externalNode, deep);
Copy the code
  • Node Is a node object imported from the outside into the current document.
  • ExternalNode Target node to be imported from the external document.
  • Deep Indicates the deep copy. The default value is false.

For example:

<! --iframe.html-->
<body>
    <h1>This is the Iframe page</h1>
    <div id="container">
        <div class="header">This is the Iframe content header</div>
        <div class="body">This is the Iframe content body</div>
    </div>
</body>

<! --index.html-->
<body>
    <div id="container">
        <div class="header">Content in the head</div>
        <div class="body">Content is the main 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>
Copy the code

The final effect is as follows:

document.adoptNode()

Get a node from another document document. The node and all nodes in its subtrees are removed from the original document (if it exists), and its ownerDocument property becomes the current Document document. You can then insert this node into the current document. Grammar:

let node = document.adoptNode(externalNode);
Copy the code
  • Node A node object retrieved from an external document.
  • ExternalNode Node object in the external document to be imported.

For example:

<! --iframe.html-->
<body>
    <h1>This is the Iframe page</h1>
    <div id="container">
        <div class="header">This is the Iframe content header</div>
        <div class="body">This is the Iframe content body</div>
    </div>
</body>

<! --index.html-->
<body>
    <div id="container">
        <div class="header">Content in the head</div>
        <div class="body">Content is the main 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>
Copy the code

Effect:

conclusion

This is a summary of how to clone (or import) DOM nodes using JS.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!