Cómo agregar el código HTML a un DIV usando JavaScript?
En este artículo, te diremos
- Cómo agregar el código HTML a un DIV usando JavaScript?
- Cómo agregar el código HTML usando InnerHTML?
- Cómo agregar el código HTML usando InsertAdJacenthtml?
Cómo agregar el código HTML a un DIV usando JavaScript?
En JavaScript, hay dos formas de agregar el código HTML a un DIV. Estas formas son las siguientes
- Agregar usando innerhtml
- Agregar usando InsertAdJacenthtml
Intentemos comprender los dos métodos anteriores para agregar HTML a un DIV en JavaScript con ejemplos y explicaciones adecuadas.
Cómo agregar el código HTML usando InnerHTML?
La propiedad innerhtml se usa para cambiar el contenido dentro de un div o cualquier etiqueta HTML. Reemplaza totalmente el contenido DIV existente con el nuevo contenido, pero para usar esta propiedad se debe asignar un DIV con un único identificación Y la identificación siempre debe ser única.
Código:
Proceso para agregar código HTML usando JavaScript
En este código, creamos un documento HTML simple que tiene una etiqueta de encabezado y una etiqueta DIV vacía con una ID única controlar. Luego usamos la propiedad innerhtml javaScript para agregar el código HTML dentro del DIV vacío.
Producción:
La salida muestra claramente que agregamos HTML Etiqueta con algo de contenido y estilo dentro de la etiqueta Div vacía usando InnerHTML a través de JavaScript.
Cómo agregar usando InsertAdJacenthtml?
En JavaScript, InsertAdJacenthTML es otro método que se utiliza para agregar el código HTML en un DIV a través de JavaScript. Este método toma 2 argumentos, el primer argumento especifica la posición del contenido en un DIV y el segundo argumento es el código HTML real que desea agregar en un DIV.
Este método utiliza cuatro posiciones para agregar el contenido HTML en un DIV:
- ANTES DEL ANTES
- antemano
- acuático
- después
Pasemos por todas estas posiciones una por una.
ANTES DEL ANTES
En el siguiente código, este atributo colocará el código HTML antes del controlar ID Div.
Código:
Proceso para agregar código HTML usando JavaScript
Este párrafo está escrito para demostrar el proceso de agregar código HTML en un DIV usando JavaScript.
En este código, creamos un documento HTML simple con etiqueta y un Tener una identificación única controlar. Dentro de este div se escribe un párrafo usando . Ahora agregamos html Producción: La salida muestra claramente que insertadjacenthtml El método agrega el código HTML antes del DIV dirigido porque usamos su atributo antes de posicionar nuestro código HTML agregado. antes Código: Este párrafo está escrito para demostrar el proceso de agregar código HTML en un DIV usando JavaScript. En este código, creamos un documento HTML simple con etiqueta y un Tener una identificación única controlar. Dentro de este div se escribe un párrafo usando . Ahora agregamos html Producción: La salida muestra claramente que insertadjacenthtml El método agrega el código HTML después del acuático Código: Este párrafo está escrito para demostrar el proceso de agregar código HTML en un DIV usando JavaScript. En este código, creamos un documento HTML simple con etiqueta y un Tener una identificación única controlar. Dentro de este div se escribe un párrafo usando . Ahora agregamos html Producción: La salida muestra claramente que insertadjacenthtml El método agrega código HTML dentro del DIV dirigido pero justo antes del después Código: Este párrafo está escrito para demostrar el proceso de agregar código HTML en un DIV usando JavaScript. En este código, creamos un documento HTML simple con etiqueta y un Tener una identificación única controlar. Dentro de este div se escribe un párrafo usando . Ahora agregamos html Producción: La salida muestra claramente que insertadjacenthtml El método agrega el código HTML después del DIV dirigido porque usamos su atributo AfterEd para posicionar nuestro código HTML adjunto. Conclusión En JavaScript, podemos agregar el código HTML a un DIV usando innerhtml y insertadjacenthtml. Innerhtml agrega el código HTML reemplazando el contenido actual en un DIV con un nuevo contenido, mientras que InsertAdJacenthtml agrega el código HTML al posicionarse, usando Atreybegin, Afterbegin, Befeend y AfterEd atributos. En este artículo, hemos aprendido sobre el proceso de agregar código HTML a un DIV usando JavaScript.
En el siguiente código, este atributo colocará el código HTML dentro del controlar id divir pero después del Proceso para agregar código HTML usando JavaScript
En el siguiente código, este atributo colocará el código HTML dentro del controlar id div pero justo antes del Proceso para agregar código HTML usando JavaScript
En el siguiente código, este atributo colocará el código HTML después del controlar ID Div.Proceso para agregar código HTML usando JavaScript