Cómo reemplazar un elemento HTML utilizando el método Reemplazar con JavaScript?

JavaScript se usa ampliamente en el desarrollo de la página web y sus bibliotecas como jQuery son muy útiles. En las tecnologías antiguas, era casi imposible cambiar o reemplazar un elemento HTML utilizando lenguajes de secuencias de comandos del lado del servidor, solo pudimos cambiar el contenido dentro del elemento a través de los lenguajes de backend. Pero gracias a JavaScript, facilitó la vida y nos permitió cambiar dinámicamente el elemento de la página web.

Proporciona varios métodos para lograr esta funcionalidad, pero el que vamos a ver en esta publicación es el JQuery's reemplazar con() método.

Echemos un vistazo a este método.

JQuery reemplazar con el método ()

En jQuery, el reemplazar con() La función se usa para reemplazar los componentes elegidos por otros nuevos y devuelve los componentes que han sido reemplazados.

El reemplazar con() La sintaxis del método se menciona a continuación.

$ (elemento).reemplazarwith (newContent, (idx) => )

Explicación de argumentos

Aquí está la explicación de los argumentos del método reemplazar ()

• nuevo contenido: Es el contenido que se utilizará para reemplazar las piezas que se han elegido.
• (idx) => : Es la función que devuelve el contenido de reemplazo. También tiene un índice de argumentos y este parámetro de índice se utiliza para devolver la posición de índice del elemento.

Para comprender mejor cómo utilizar el reemplazar con() función, considere los siguientes ejemplos.

Ejemplo 1

Supongamos que tenemos un elemento en nuestro html cuya identificación es "elemento1"Y con el clic de un botón queremos reemplazarlo con el

La parte HTML sería así:

Este texto es una etiqueta Div
Reemplazar

Y con el clic de un botón, queremos reemplazar el

Ahora, para convertir completamente el etiqueta y su contenido al

$ (documento).Ready (function ()
$ ("#btn").hacer clic (function ()
$ ("#element1").reemplazar con("

Elemento reemplazado :)

");
);
);

En el ejemplo anterior, simplemente estamos obteniendo primero el elemento HTML usando las ID de la botón y div etiqueta y luego reemplazando el etiqueta con el

Etiqueta usando reemplazar con() método.

Producción

Puedes presenciar que el elemento fue reemplazado con éxito.

Conclusión

JavaScript's reemplazar con() El método se utiliza para reemplazar un elemento HTML con algún otro elemento de acuerdo con el requisito. Este reemplazar con() El método toma dos argumentos, el primer argumento es el contenido con el que desea ser reemplazado mientras el segundo argumento se utiliza para devolver la posición de índice del contenido con el que desea reemplazar. En este artículo, hemos discutido los ejemplos de reemplazar el contenido anterior con el nuevo usando jQuery.