The selection.clone() function is used to clone the selected elements and inserts these clones immediately after the same elements.
Syntax:
selection.clone([deep]);
Parameters: This function accepts single parameters as mentioned above and described below:
- deep: If deep is true the descendant nodes will also be cloned.
Return Value: This function returns the clone of the element to be inserted.
Below examples illustrate the selection.clone() function in D3.js:
Example 1: When all the div are effected in the selection.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" path1tent="width=device-width,                     initial-scale=1.0">     </script>       <style>         h1 {             color: green;         }           p:hover {             background-color: grey;             cursor: pointer;         }           div {             width: 300px;             color: #ffffff;             height: 50px;             background-color: green;             margin: 10px;         }     </style> </head>   <body>     <h1>neveropen</h1>     <div><span>1. Some text</span></div>     <div><span>2. Some text</span></div>       <button>Click Here!</button>       <script>         function func() {             // Selecting div and             // Cloning the div and             // Adding html to it             var div = d3.selectAll("div")                 .clone()                 .html("<span>I am cloned.</span>");             console.log(div);               var b = document.querySelector("b");             b.innerText = "This <b> tag is appended. "         }         let btn = document.querySelector("button");         btn.addEventListener("click", func);     </script> </body>   </html> |
Output:
-
Before clicking the button:
-
After clicking the button:
Example 2: When only one div is effected in the selection.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" path1tent="width=device-width,                     initial-scale=1.0">     </script>     <style>         h1 {             color: green;         }           p:hover {             background-color: grey;             cursor: pointer;         }           div {             width: 300px;             color: #ffffff;             height: 50px;             background-color: green;             margin: 10px;         }     </style>   <body>     <h1>neveropen</h1>     <div><span>         1. Only this div is cloned.     </span></div>     <div><span>         2. This div will not be cloned.     </span></div>           <button>Click Here!</button>       <script>         function func() {             // Selecting div and             // Cloning the divs             // Adding html to cloned divs               var div = d3.select("div")                 .clone()                 .html("<span>I am cloned.</span>");             console.log(div);             var b = document.querySelector("b");             b.innerText = "This <b> tag is appended. "         }         let btn = document.querySelector("button");         btn.addEventListener("click", func);       </script> </body>   </html> |
Output:
-
Before clicking the button:
-
After clicking the button:
Example 3: When deep is equal to true then all descendant elements are cloned.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" path1tent="width=device-width,                     initial-scale=1.0">     </script>       <style>         h1 {             color: green;         }           div {             width: 300px;             color: #ffffff;             height: 50px;             background-color: green;             margin: 10px;         }     </style> </head>   <body>     <h1>neveropen</h1>       <p>Descendants will also be cloned.</p>         <p>         Here Descendants of div is span         that will be cloned.     </p>       <div><span>1. This div will be cloned.</span></div>     <div><span>2. This div will be cloned.</span></div>     <button>Click me</button>       <script>         function func() {               // Selecting div and Cloning the divs             // and its descendant elements             var div = d3.selectAll("div")                 .clone([true])             console.log(div);             var b = document.querySelector("b");             b.innerText = "This <b> tag is appended. "         }         let btn = document.querySelector("button");         btn.addEventListener("click", func);     </script> </body>   </html> |
Output:
-
Before clicking the button:
-
After clicking the button:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
