La función selection.append() se usa para agregar un nuevo elemento al nombre de la etiqueta HTML como se indica en los parámetros al final del elemento. Si el tipo que se da es una función entonces se debe evaluar para cada elemento que está en la selección.
Sintaxis:
selection.append(type);
Parámetros: esta función toma solo un parámetro que se proporciona arriba y se describe a continuación.
- type: este parámetro toma una string que define el tipo del elemento.
Valor de retorno: esta función debe devolver un elemento para agregarlo al final.
Ejemplo 1: En el siguiente ejemplo, los elementos se agregan a cada elemento seleccionado.
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 {
width: 50px;
height: 50px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h4>D3.js | selection.append() Function</h4>
<p><b>Click me</b></p>
<p><b>Click me</b></p>
<script>
function func() {
// Selecting all p and
// Appending a DIV to each p tag
var chk = d3.selectAll("p")
.append("div");
var div = document.querySelector("div");
console.log(div)
}
let btn = document.querySelector("p");
btn.addEventListener("click", func);
</script>
</body>
</html>
Producción:
-
Antes de hacer clic en el elemento «haz clic en mí»:
-
Después de hacer clic en el elemento «haz clic en mí»:
Ejemplo 2: En el siguiente ejemplo, los elementos se agregan solo al primer elemento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
</head>
<style>
h1{
line-height: 5px;
color: green;
}
h1, h2, p, h4, h5, h6{
background-color: #f2f2f2;
padding:20px;
width: 300px;
line-height: 5px;
}
p:hover{
background-color: grey;
cursor: pointer;
}
div{
width: 50px;
height: 50px;
background-color: green;
margin:10px;
}
</style>
<body>
<h1>Geeks for geeks</h1>
<p>Click me.</p>
<p>Click me.</p>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
function func(){
// Selecting p and
// Appending a DIV to the p tag
// Only first p tag is effected
var chk = d3.select("p")
.append("b");
var b=document.querySelector("b");
b.innerText=" This <b> tag is appended."
}
let btn=document.querySelector("p");
btn.addEventListener("click", func);
</script>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón «haz clic en mí»:
-
Después de hacer clic en el botón «haz clic en mí»:
