En este artículo, veremos cómo reemplazar texto después de una etiqueta anidada usando jQuery . Hay un enfoque principal que se puede seguir.
Enfoque: Usamos los métodos click() , content () y filter() y las propiedades this , nodeType y nodeValue . Hay un elemento de división con una identificación de etiqueta externa con una etiqueta de intervalo con una clase de etiqueta anidada anidada dentro de ella. También se define un botón que reemplaza el texto después de la etiqueta anidada al hacer clic. Adjuntamos un evento de clic al botón usando el método click() .
Este método contiene una función anónima para ejecutar al hacer clic en el botón. Seleccionamos el elemento div y obtenemos todos sus Nodes secundarios, incluidos los Nodes de texto, utilizando el método contents() .
A continuación, filtramos a través de todos estos Nodes secundarios que son Nodes de texto utilizando el método filter() . Simplemente verifique el tipo de Node de cada Node secundario usando la propiedad nodeType . Si la propiedad nodeType devuelve el valor de 3, entonces el Node dado es un Node de texto. Ahora, para obtener el texto después de la etiqueta anidada, seleccionamos el segundo Node de texto de todos los Nodes de texto filtrados por indexación (índice 1). Para reemplazar el valor de texto del Node de texto seleccionado, usamos la propiedad nodeValue que nos ayuda a establecer el nuevo valor del Node de texto.
Ejemplo: en este ejemplo en particular, el texto original después de la etiqueta anidada es «CS hub for geeks». . Sustituimos este texto por “Portal de informática para geeks”. usando el enfoque discutido anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
button {
margin-top: 2rem;
cursor: pointer;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>jQuery - Replace text after a nested tag</p>
<div id="outer-tag">
<span class="nested-tag">
GeeksforGeeks is a </span> C.S. hub for geeks.
</div>
<button>Click me to change text after nested tag</button>
<script type="text/javascript">
$("button").click(function () {
$("#outer-tag").contents().filter(function () {
return this.nodeType == 3;
})[1].nodeValue = "Computer Science portal for geeks.";
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA