Escribir código HTML es fácil, pero cuando se trata de cambios dinámicos en las páginas, como agregar HTML, debe usar estrategias inusuales. JavaScript es un lenguaje poderoso para hacer este tipo de trabajos. Puede usar fácilmente JavaScript para colocar el código HTML dentro de la plantilla. Discutiremos esto en este artículo.

A través de JavaScript, hay dos formas de adjuntar el código HTML a una etiqueta DIV.

• Uso de la propiedad innerhtml
• Insertar HTML adyacente usando la función InsertAdJacenthtml ()

Uso del atributo innerhtml

Para usar la propiedad innerhtml para adjuntar el código a un elemento (div), primero elija el elemento (div) donde desea agregar el código. Luego, usando el operador += en InnerHTML, agregue el código envuelto como cadenas.

Aquí está la sintaxis del atributo.

Htmlelement.innerhtml += "inserte su código aquí"

Tomemos un ejemplo de esto. Primero, nos referiremos al elemento HTML utilizando la propiedad:

documento.getElementById ();

Por lo tanto, creemos un <div> y poner un <H1> etiqueta y un <botón> dentro de eso.

Este es un tutorial de Linuxhint

Agradecer párrafo

Como puede ver, hemos dado una identificación de "prueba" al div etiqueta y colocó el texto que dice "adjuntar párrafo" dentro del botón. Con estos, tenemos el siguiente resultado en la pantalla

Código JavaScript:

Tenemos un botón vinculado a una función llamada "ButtonPressed ()" en el script. Pero, no hemos definido esta función, y este botón no hace nada. Entonces, creemos esta función en el script que agregaría un párrafo en este div y cuente cuántas veces hemos agregado este párrafo. Eche un vistazo al siguiente código.

i = 1;
const buttonpissed = () =>
documento.getElementById ("prueba").innerhtml +=
"

Yoo Have agregue este párrafo " + i +" Times ";
i ++;

Nota: Hemos creado una variable de contra "i". Esto se usará para controlar cuántas veces hemos agregado este párrafo dentro de la etiqueta Div.

Ahora, si ejecutamos el código y presionamos el botón que obtenemos:

Nota: Esta técnica esencialmente elimina todo el contenido del DIV y lo reemplaza con cosas nuevas. Cualquier oyente vinculado a los nodos infantiles de ese div se perderá como resultado. Por eso siempre lo concatenamos.

Usando el método adjacenthtml

La función InsertAdJacenthtml () también se puede usar para adjuntar el código HTML a un DIV. Este método es útil cuando se trata de agregar HTML en algún lugar específico. Por lo tanto, se necesitan dos parámetros en este método:

• La ubicación (en el documento) donde se debe insertar el código ('Afterbegin', 'BeforeBegin', 'AfterEd', 'Beforeend').
  • Afterbegin: justo después del elemento HTML mencionado pero dentro de la etiqueta.
  • ANTES BEGIN - Antes de que se mencionara el elemento HTML
  • AfterEd - Después de la etiqueta de cierre del elemento HTML
  • ANTERIENTO - Dentro del elemento HTML pero antes de la etiqueta de cierre
• Debe rodear el código HTML que desea agregar, dentro de las citas.

Esta es la sintaxis general del método

Htmlelement.insertadjacenthtml ('UBICACIÓN', 'CÓDIGO HTML');

Usemos el ejemplo anterior. El mismo código HTML. Sin embargo, esta vez el script sería ligeramente diferente como:

Código HTML:

Este es un tutorial de Linuxhint

Agradecer párrafo

Nota: Dado que estamos utilizando el ejemplo anterior, el código HTML es exactamente el mismo.

Código JavaScript:

i = 1;
function buttonpressed ()
documento.getElementById ("prueba").InsertAdJacenthtml ("antes de Begin",
"

Adjunto " + i +" veces antes de div

");
i ++;

Nota: estamos usando el "Antes de Begin"Propiedad para agregar el

etiqueta antes del inicio del div.

Producción:

Eso es todo, has aprendido cómo podemos agregar algún código HTML a través de JavaScript.

Conclusión

Hay dos métodos que puede usar para agregar el código HTML en una página web. El primer método es utilizando innerhtml mientras que el segundo método es utilizando el Adycenthtml método. En este artículo, hemos tomado ejemplos de los métodos innerhtml y adycenthtml para agregar el código HTML en una página web.