En este artículo aprenderemos a leer el contenido de texto de todos los elementos <span> de un elemento <div>.
Planteamiento: Primero seleccionaremos la división dentro de la cual vamos a encontrar los elementos <span>. Esto se puede hacer seleccionando el elemento por su ID usando el método getElementById() . A continuación, obtendremos todos los elementos que son del tipo especificado que están contenidos en esta división. Esto se puede hacer usando el método getElementsByTagName() en la división que hemos encontrado en el paso anterior. Luego podemos obtener el contenido de texto dentro de él recorriendo todos los elementos de intervalo y mostrarlo como una lista.
Sintaxis:
let getInfo = () => {
// Get the division inside which the
// spans have to be found
let container = document.getElementById("container");
let spans = container.getElementsByTagName("span");
// Get output element
let outputP = document.getElementById("output");
// Iterate over spans
for (let span of spans) {
// Create a new list element with the data
let listElem = document.createElement("li");
listElem.textContent = span.textContent;
// Insert text content of span inside output html element
outputP.appendChild(listElem);
}
};
Los siguientes ejemplos demuestran este enfoque.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<!-- Define the span elements
with text content -->
<div id="container">
<span> Span 1 </span>
<span> Span 2 </span>
<span> Span 3 </span>
<span> Span 4 </span>
<span> Span 5 </span>
<span> Span 6 </span>
</div>
<button onclick="getInfo()"
style="margin-top: 20px;">
Get Text
</button>
<h4>
Text of only <span> elements
inside division:
</h4>
<ul id="output"></ul>
<script>
let getInfo = () => {
// Get the division inside which the
// spans have to be found
let container =
document.getElementById("container");
let spans =
container.getElementsByTagName("span");
// Get output element
let outputP =
document.getElementById("output");
// Iterate over spans
for (let span of spans) {
// Create a new list element
// with the data
let listElem =
document.createElement("li");
listElem.textContent =
span.textContent;
// Insert text content of span
// inside output html element
outputP.appendChild(listElem);
}
};
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<!-- Define the span elements
with text content -->
<div id="container">
<span> Span 1 </span>
<p> This is another tag </p>
<span> Span 2 </span>
<p> This is another tag </p>
<span> Span 6 </span>
</div>
<button onclick="getInfo()"
style="margin-top: 10px;">
Get Text
</button>
<h4>
Text of only <span> elements
inside division:
</h4>
<p id="output"></p>
<script>
let getInfo = () => {
// Get the division inside which the
// spans have to be found
let container =
document.getElementById("container");
let spans =
container.getElementsByTagName("span");
// Get output element
let outputP =
document.getElementById("output");
// Iterate over spans
for (let span of spans) {
// Create a new list element
// with the data
let listElem =
document.createElement("li");
listElem.textContent =
span.textContent;
// Insert text content of span
// inside output html element
outputP.appendChild(listElem);
}
};
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pratikraut0000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA