The selection.insert() function is used to append a new element of the given type at the specified position. It inserts a new element before the selector for each selected element.
Syntax:
selection.insert(type[, before]);
Parameters: This function takes two parameters which are given above and described below:
- type: It is a string that defines the type of element.
- before: It is a string that defines an element before which a new element is inserted.
Return Values: This function must return the child element before which the new element is inserted.
Example 1: When elements are inserted before all elements 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 { background-color: #f2f2f2; padding: 10px; width: 300px; line-height: 5px; } p:hover { background-color: grey; padding: 10px; cursor: pointer; } div { height: 50px; background-color: green; margin: 10px; } </style> </head> <body> <h1>neveropen</h1> <h4>D3.js selection.insert() Function</h4> <span> Div will be inserted before "Click Here!" </span> <p id="p"><b>Click Here!</b></p> <script> function func() { // Selecting all p and appending a DIV // before the b tag to each p tag var chk = d3.selectAll("p") .insert("div", "b"); } clickme = document.getElementById("p"); clickme.addEventListener("click", func); </script> </body> </html> |
Output:
Before clicking the click “Click Here” element:
Before clicking the click “Click Here” element:
Example 2: When elements are inserted before first elements 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; } div { width: 300px; color: #ffffff; height: 50px; background-color: green; margin: 10px; } </style> </head> <body> <h1>neveropen</h1> <h4>D3.js selection.insert() Function</h4> <div><span>Click Here!</span></div> <script> function func() { // Selecting div and Inserting // <b> tag before <span> tag var div = d3.select("div") .insert("b", "span"); var b = document.querySelector("b"); b.innerText = "This <b> tag is appended. "; } btn = document.querySelector("div"); btn.addEventListener("click", func); </script> </body> </html> |
Output:
Before clicking the “Click Here” element:
After clicking the “Click Here” element:
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!
