Las actualizaciones de JavaScript vienen con métodos y características nuevos y mejorados. Una de estas nuevas características es la reemplazar con() método. JavaScript es compatible con todos los navegadores web y la mayoría de las funciones o métodos de JavaScript son funcionales en estos navegadores con la excepción de Internet Explorer. JavaScript es famoso por presentar soluciones nuevas y más eficientes a varios problemas. El reemplazar con() es exactamente eso, un nuevo método que es mucho mejor que el enfoque trivial

¿Qué es reemplazar con el método ()?

El reemplazar con() El método se utiliza para reemplazar un elemento \ nodo desde el Domina (Modelo de objeto de documento) con otro elemento \ nodo. Ahora, también puede pensar por qué necesitamos un método separado para una tarea que se puede hacer fácilmente utilizando el enfoque tradicional de JavaScript. Bueno, para ponerlo en palabras simples, el reemplazar con() Los métodos permiten a los usuarios reemplazar elementos haciendo referencia directamente a los nodos infantiles. Anteriormente, teníamos que referirnos al nodo principal y luego referirnos al nodo infantil para reemplazar el nodo infantil.

El reemplazar con() El método es compatible con todos los navegadores web modernos excepto Internet Explorer. Puede obtener el soporte para Internet Explorer, pero luego necesitará un Poliemolos.

Sintaxis
La sintaxis de reemplazar con() El método es el siguiente:

antiguo.reemplazar con (newnode);

antiguo: El elemento o el nodo que se reemplazará
nodo: El nodo o elemento que reemplazará el nodo antiguo

También puede agregar varios nodos utilizando el reemplazar con() método como así:

antiguo.reemplazar con (newNode1, newnode2, newnode3 ...);

Ahora, conocemos la sintaxis del reemplazar con() Método, sabemos lo que se supone que debe hacer, pero aún no sabemos cómo usarlo. Entonces, intentemos usarlo con un ejemplo.

Ejemplo
Cree un archivo HTML con las siguientes líneas dentro del etiqueta.

Tutorial de Linuxhint

Reemplazar con el método () en JavaScript

Este es un texto aleatorio para ser reemplazado

Haga clic para reemplazar el nodo

Repasemos el fragmento del código y expliquemos algunas cosas:

• Creamos una etiqueta de "centro" y colocamos todo dentro de ella para centrarla en la página.
• Creamos un "div"Con la identificación"manifestación".
• Dentro de div, tenemos una "pag"Etiqueta con algún texto dentro de él.
• Creamos un botón fuera del div para reemplazar el texto dentro del pag etiqueta en el clic de este botón y lo vinculé a la función "btnclick ()".

Ejecutemos la página HTML y así es como se ve:

Creemos la parte de JavaScript del tutorial.

Primero, creamos la función "btnclick ()", bajo la etiqueta de guión o en un archivo de script diferente.

función btnclick ()
// Pon los comandos posteriores dentro aquí

Para cambiar el

etiqueta o sus nodos infantiles, primero debemos obtener su referencia tan pronto como se presione el botón. Para obtener la referencia del

etiqueta que está dentro del Etiqueta, usamos un selector de consultas. Desde el div tiene el id = "demostración" Usamos el siguiente comando:

const ptag = documento.QuerySelector ("#demo p");

Ahora necesitamos un elemento que reemplace el const NewInput = documento.createElement ("entrada");
NewInput.valor = "reemplazó el nodo antiguo";

Ahora que hemos creado un elemento para reemplazar el

etiqueta con, reemplazémoslo realmente usando el reemplazar con() Método utilizando el siguiente fragmento de código:

ptag.reemplazar con (newInput);

Por último, si queremos eliminar el botón también de la pantalla. Para hacer ese uso:

const btn = documento.getElementById ("BTN");
btn.eliminar();

El fragmento de código completo se vería así:

función btnclick ()
const ptag = documento.QuerySelector ("#demo p");
const NewInput = documento.createElement ("entrada");
NewInput.valor = "reemplazó el nodo antiguo";
ptag.reemplazar con (newInput);
const btn = documento.getElementById ("BTN");
btn.eliminar();

Ejecute el archivo HTML y verá este resultado:

Ahora para verificar si el

etiqueta En realidad fue reemplazado, podemos hacerlo verificar el código fuente con las herramientas del desarrollador.

Al principio, es así:

Después de hacer clic en el botón, se vuelve así:

Como puedes ver, el

etiqueta se reemplaza por completo con el etiqueta, Cuando presionamos el botón y ahora solo hay la etiqueta de entrada dentro del "#Demo div".

Agregar múltiples nodos

También podemos usar el reemplazar con() método para insertar múltiples nodos en reemplazo para el nodo antiguo. Separar múltiples nodos con una coma "",.

En el ejemplo actual, intentemos agregar un nodo de texto simple junto con la etiqueta de entrada usando el comando:

ptag.reemplazar con (newInput, "hola");

Nota: Si solo escribimos una cadena, creará automáticamente un nodo de texto.

Producción:

Reemplazar solo los nodos infantiles con el método reemplazar ()

Una de las principales características de reemplazar con() es reemplazar los nodos de los niños directamente. Supongamos que no queremos eliminar por completo el

etiqueta del ejemplo anterior. Tal vez, queremos eliminar el contenido dentro del

etiqueta e inserte un etiqueta en negrita con algún texto en el

etiqueta. Podemos hacer eso haciendo referencia a los nodos de los niños del

etiqueta.

Primero, creemos la etiqueta en negrita con:

const newchildNode = documento.createElement ("b");
newchildnode.textContent = "Soy una etiqueta en negrita y el nuevo ChildNode";

Ahora, reemplacemos el primer nodo infantil del

Etiqueta usando la sintaxis de la matriz como:

ptag.Nodos de niños [0].reemplazar con (newchildNode);

Ejecute el código y la salida es la siguiente:

Examinemos el código fuente de la opción Herramientas del desarrollador del navegador para verificar que el

no se eliminó por completo en lugar del etiqueta en negrita y su contenido se agregó dentro del

Ahora, como puede ver claramente, hemos reemplazado con éxito el nodo infantil del

etiqueta y agregó otra etiqueta dentro de él como su nodo hijo. Eso es todo para el reemplazar con() método.

Conclusión

El reemplazar con() es un método realmente útil en JavaScript que se puede usar para reemplazar nodos y elementos con nuevos nodos y elementos. Este enfoque es definitivamente mejor que el enfoque tradicional de JavaScript de referirse al nodo infantil utilizando la referencia del nodo principal, esto significa que también necesitamos obtener la referencia del nodo principal. Aprendimos la sintaxis y el funcionamiento del reemplazar con() Método junto con ejemplos y confirmó el reemplazo mirando el código fuente dentro de las herramientas de desarrollador del navegador.