JavaScript ha existido durante mucho tiempo y actualiza sus capacidades con regularidad. Desde el principio, obtuvo soporte en todos los navegadores modernos y se utiliza en el desarrollo web moderno.
Para mejorar aún más la funcionalidad de JavaScript, los desarrolladores crearon extensiones de lenguaje mediante el desarrollo de bibliotecas de JavaScript. Una de esas bibliotecas es jQuery, que es muy poderosa y mejora en gran medida la extensibilidad de JavaScript.
La sintaxis de jQuery es ligeramente diferente de la de JavaScript estándar, por lo que es importante que comprenda el desglose entre ellos.
En esta publicación, discutiremos la función jQuery llamada intercambio ()en lo que hace y por qué es importante. También discutiremos cómo puede ayudarlo a mejorar su flujo de trabajo comparándolo con el enfoque estándar de JavaScript.
¿Qué es la función jQuery replaceWith ()?
En los viejos tiempos, cuando los desarrolladores web querían cambiar condicionalmente el contenido de su software, tenían que usar Javascript para hacer referencia a objetos indirectamente. Al interactuar con el Modelo de objetos del documento (DOM), JavaScript clasifica cada elemento HTML como un NODO. Si queríamos reemplazar un nodo, teníamos que identificar su nodo principal y luego usarlo para apuntar a uno de sus nodos secundarios para cambiarlo dinámicamente.
Introduzca jQuery, una biblioteca de JavaScript diseñada para aumentar la flexibilidad y mejorar la funcionalidad. Con el tiempo, jQuery ha crecido constantemente, agregando nuevas funciones, métodos, objetos y otras funciones de mejora de JavaScript.
En última instancia, los desarrolladores agregaron la función replaceWith () para simplificar el reemplazo de los nodos DOM por otros nuevos. Con esta nueva función, podemos apuntar directamente a un nodo DOM y reemplazarlo con uno o incluso varios nodos nuevos.
Veámoslo en acción, comenzando con cómo se hace en JavaScript.
Reemplazar el elemento JavaScript
En JavaScript, para reemplazar el nodo DOM, primero debemos hacer referencia al nodo principal del objetivo y luego reemplazar su nodo secundario. Veamos cómo se ve este proceso en JavaScript estándar.
<ul id="KiaCars">
<li>Sorento</li>
<li>Seltos</li>
<li>Sportage</li>
</ul>
<p>
Click the button to replace the first item in the list.
</p>
<button onclick="myFunction()">Try it</button>
El código anterior nos proporciona el código HTML básico para manipular; cada elemento HTML es un nodo y cada elemento anidado dentro de otro elemento es un nodo secundario. A continuación, creamos una función llamada «myFunction» y agregamos el código necesario para realizar esta tarea.
function myFunction(){}
En JavaScript estándar, si desea cambiar un elemento de una lista, primero debe crear un contexto para el nodo principal del objetivo.
/* Create a new <li> element */
var listElem = document.createElement("li");
La línea de código anterior selecciona la lista desordenada con el identificador «KiaCars», que nos brinda el contexto en el que debemos señalar el elemento de la lista que queremos cambiar. Dada la lista de objetivos, ahora podemos determinar a cuál de sus nodos secundarios nos dirigimos, y lo hacemos con la siguiente línea de código.
/* Get the first child node of an <ul> element */
let cars = document.getElementById("KiaCars");
Esta línea de código apunta al primer nodo secundario en la lista «Elemento»; ahora tenemos una referencia al nodo que vamos a cambiar. Ahora echemos un vistazo al método estándar de JavaScript para realizar esta tarea.
/* Replace the first child node of <ul> with the newly created text node */
cars.replaceChild(listElem, cars.childNodes[0]);
El código anterior reemplaza con éxito el primer elemento de la lista; el problema es que el proceso es un poco confuso. Crea un elemento de lista vacío porque el texto del elemento de lista se considera un nodo. Entonces, para reemplazar el texto, tendríamos que apuntar al nodo principal, que es el nuevo elemento de la lista que acabamos de crear.
/* Replace the text node of the new <li >with the newly created text node */
var newCar = document.createTextNode("Telluride");
listElem.replaceChild(newCar, listElem.childNodes[0]);
Esto puede volverse rápidamente engorroso y tedioso con implementaciones repetidas, entre intercambio () de la biblioteca jQuery.
Cómo usar la función jQuery replaceWith ()
El proceso de cambiar dinámicamente el contenido de sus sitios web se simplifica gracias a intercambio () función. Esta característica brinda a los desarrolladores la capacidad de cambiar el contenido utilizando menos código al seleccionar y reemplazar un nodo directamente.
Echemos un vistazo a cómo funciona.
$(document).ready(function(){
var listElem = document.createElement("li");
$("button").click(function(){
$("li:first").replaceWith(listElem);
listElem.appendChild( document.createTextNode("Water"))
});
});
La sintaxis de jQuery es un poco diferente, pero el código anterior funciona igual que el código JavaScript de antes en esta publicación. Este código hace tres cosas; espera a que finalice la carga del DOM, luego adjunta un detector de eventos al elemento del botón y establece la acción que se llevará a cabo cuando se active el evento.
El siguiente código es el código en el que queremos centrarnos.
$("li:first").replaceWith(listElem);
En esta línea de código, comenzamos seleccionando el primer elemento de la lista y luego lo reemplazamos directamente con un nuevo nodo de elemento de lista vacío. Luego agregamos un nuevo nodo de texto al elemento de la lista, reemplazando el texto en ese elemento DOM.
jQuery replaceWith () Mejores prácticas
Función JQuery intercambio () es una poderosa herramienta que puede eliminar gran parte del trabajo pesado que se requería anteriormente relacionado con el contenido que cambia dinámicamente en un sitio web. Sin embargo, hay algunos puntos importantes para recordar de esta publicación:
- Para usar jQuery, debe conectarse a la biblioteca jQuery.
- intercambio () es una función de jQuery, lo que la hace válida en JavaScript aunque tiene una sintaxis diferente.
- La sencillez proporcionada por intercambio () la característica es más notable al poder dirigirse directamente al nodo que desea cambiar, reemplazar o modificar.
- Por intercambio () reemplazar un nodo también eliminará todos los nodos secundarios del destino.
