Cómo agregar o eliminar elementos HTML a través de JavaScript
Este artículo discutirá los procedimientos de agregar o eliminar el Elementos html a través de Javascript. También demostraremos el uso de los métodos appendChild () e insertBeFore () para agregar los elementos HTML. Además, se le proporcionarán ejemplos relacionados con los métodos de remove () y eliminar () para eliminar los elementos HTML. Entonces, comencemos!
Cómo agregar elementos HTML a través de JavaScript usando el método AppendChild ()
El método JavaScript appendChild () se utiliza para agregar un elemento HTML como el hijo del nodo principal especificado. Este método se utiliza para mover elementos HTML.
Sintaxis del método appendchild ()
parentnode.appendChild (niendo);Aquí el parentnode es el elemento html que queremos declarar como padre, mientras que el nodo infantil es el elemento HTML recién creado que se agregará al nodo principal.
Ejemplo: Cómo agregar elementos HTML a través de JavaScript usando el método appendChild ()
En este ejemplo, le mostraremos cómo usar el "añadir Niño()Método para agregar los elementos HTML a través de JavaScript. En primer lugar, agregaremos un encabezado y un párrafo usando el
y
Elementos HTML:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
En el siguiente paso, crearemos un nuevo
elemento "párrafo"Al utilizar el"createElement ()"Método del objeto de documento:
Ejecute el programa anterior en su editor de código favorito o en cualquier Sandbox de codificación en línea; Sin embargo, utilizaremos el JSBIN para este propósito:
Como puede ver en la salida dada a continuación, se agrega un nuevo elemento HTML que tiene el contenido de texto "Este es un nuevo nodo":
Cómo agregar elementos HTML a través de JavaScript usando el método InsertBore ()
Si desea insertar un elemento HTML como un nodo infantil antes del nodo especificado, puede invocar el "insertBefore ()"Método JavaScript.
Sintaxis del método insertMethod ()
parentnode.insertBefore (NewNode, EXISTNODE);Aquí el "nodo"Es el elemento HTML recién creado que desea agregar", "existente"Es el elemento antes del cual insertará su elemento HTML y el"parentnode"¿Es el elemento HTML que ha especificado como el nodo principal.
Ejemplo: cómo agregar elementos HTML a través de JavaScript usando el método InsertBefore ()
En el ejemplo anterior, hemos utilizado el método appendChild () para agregar el nuevo elemento HTML como el último hijo del HTML principal. Sin embargo, también puede usar el JavaScript "insertBefore ()Método para agregar un elemento HTML antes del elemento especificado. El ejemplo a continuación le enseñará el uso de "insertBefore ()" método.
En primer lugar, agregaremos un encabezado y algunos párrafos de la siguiente manera:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
A continuación, crearemos un nuevo elemento "párrafo"Elemento HTML, y luego defina un nodo de texto infantil para él:
La ejecución del programa anterior agregará el "párrafo"Html antes"P1":
Cómo eliminar los elementos HTML a través de JavaScript usando el método DeMete ()
El javascript "eliminar()El método se utiliza para eliminar el elemento HTML especificado del modelo de objeto de documento (DOM).
Sintaxis del método remove ()
nodo.eliminar()Aquí, "nodo"Representa el elemento HTML que desea eliminar a través de JavaScript.
Ejemplo: cómo eliminar los elementos HTML a través de JavaScript usando el método DeMete ()
En el siguiente, hemos agregado un elemento HTML de encabezado, un párrafo
y un elemento que comprende dos párrafos y como nodos infantiles:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
A continuación, agregaremos un botón y adjuntaremos un "al hacer clic" controlador de eventos. Según el siguiente código, cuando haremos clic en el "Eliminar elemento"Botón, invocará el"myFunction ()" método:
En el "myFunction ()"Método, en primer lugar, utilizamos el"documento.GetElementByid"Para encontrar el elemento que queremos eliminar especificando su"identificación", Entonces invocaremos el"eliminar()" método:
La salida dada por debajo significa que "P1"HTML se elimina de nuestro programa JavaScript con la ayuda del"eliminar()" función:
Cómo eliminar los elementos HTML a través de JavaScript usando el método RemoVeChild ()
En JavaScript, el "removechild ()"Se utiliza para eliminar un nodo HTML infantil específico de un elemento HTML.
Sintaxis del método RemoVeChild ()
parentnode.RemoVCHILD (NiDNODE)Aquí, el ParentNode es el elemento HTML que hemos especificado como un "padre"Nodo, y ChildNode es el elemento HTML que queremos eliminar del elemento principal.
Ejemplo: cómo eliminar elementos HTML a través de JavaScript usando el método RemoVeChild ()
En este ejemplo, intentaremos eliminar el elemento infantil de nuestro elemento HTML definido:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
Para eliminar un elemento infantil, en primer lugar, debe crear un "padre"Elemento HTML y especifique el elemento HTML que actúa como padre en su código JavaScript. En nuestro caso, hemos agregado "div1":
Como puede ver, el elemento infantil del elemento HTML se elimina con éxito:
Conclusión
Para agregar un elemento HTML en su programa JavaScript, puede usar el método AppendChild () e InsertBore (), mientras que, para eliminar cualquier elemento HTML específico o un nodo HTML infantil, se usan () y eliminar () los métodos de acuerdo con su requisitos. Este artículo sobre cómo agregar o eliminar los elementos HTML a través de JavaScript. También hemos demostrado el uso de los métodos AppendChild () e Insertbefore () para agregar los elementos HTML. Además, en este artículo también se proporcionan ejemplos relacionados con los métodos de remove () y removeChild () para eliminar los elementos HTML.