D3.js selection.insert() Function
Last Updated :
31 Aug, 2020
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 >GeeksforGeeks</ 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 >GeeksforGeeks</ 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...