La función selection.insert() se usa para agregar un nuevo elemento del tipo dado en la posición especificada. Inserta un nuevo elemento antes del selector para cada elemento seleccionado.
Sintaxis:
selection.insert(type[, before]);
Parámetros: esta función toma dos parámetros que se dan arriba y se describen a continuación:
- type: Es una string que define el tipo de elemento.
- before: Es una string que define un elemento antes del cual se inserta un nuevo elemento.
Valores devueltos: esta función debe devolver el elemento secundario antes del cual se inserta el nuevo elemento.
Ejemplo 1: cuando los elementos se insertan antes que todos los elementos de la selección.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</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>
Producción:
Antes de hacer clic en el elemento «Haga clic aquí»:
Antes de hacer clic en el elemento «Haga clic aquí»:
Ejemplo 2: cuando los elementos se insertan antes de los primeros elementos en la selección.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</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>
Producción:
Antes de hacer clic en el elemento «Haga clic aquí»:
Después de hacer clic en el elemento «Haga clic aquí»:
