Insertar HTML en un Div - JavaScript

En muchos casos, es necesario agregar datos dinámicamente en los sitios web, como en foros de redes sociales, tiendas en línea, sitios web de noticias, paneles, etc. Más específicamente, cualquier sitio web que muestre datos cambiantes o contenido puede requerir actualizaciones dinámicas utilizando JavaScript u otras herramientas de desarrollo web.

Este artículo describirá cómo insertar un HTML en un elemento div en JavaScript.

Cómo insertar HTML en un DIV usando JavaScript?

Como JavaScript es un lenguaje dinámico y se usa dinámicamente. Entonces, para este propósito, use los atributos prebuiltes de JavaScript. Para insertar un HTML en un DIV, utilice los siguientes enfoques:

• propiedad innerhtml
• propiedad de innteje

Método 1: inserte HTML en un DIV utilizando la propiedad "InnerHTML"

Utilizar el "innerhtmlPropiedad para insertar el HTML en un Div. Puede recuperar el contenido HTML de un elemento como una cadena o establecer un nuevo contenido HTML para un elemento, incluidas las etiquetas de texto o HTML.

Sintaxis

Use la sintaxis dada para la propiedad InnerHTML para agregar HTML a un DIV en JavaScript:

elemento.innerhtml

Ejemplo

Cree un DIV en un elemento HTML usando la etiqueta y asocie una ID "Insertar texto"

En un archivo JavaScript o la etiqueta, obtenga la referencia del elemento DIV usando su ID asignada y use el "innerhtml"Atributo para establecer el texto con el enlace de anclaje:

documento.getElementById ("InsertText").innerhtml = "Bienvenido a Linuxhint";

Como puede ver, el texto con el enlace se ha insertado correctamente en la página utilizando el JavaScript:

Método 2: Inserte HTML en un DIV utilizando la propiedad "InnteText"

Otra forma de insertar HTML en un DIV es usar el "intexto" propiedad. Puede obtener/buscar el contenido de texto del elemento HTML o establecer un nuevo contenido de texto para un elemento HTML.

Sintaxis

Utilice la siguiente sintaxis para la propiedad InnteText:

elemento.intexto

Ejemplo

Aquí, agregaremos el texto en el elemento DIV usando el atributo innecext:

documento.getElementById ("InsertText").inteText = "hy! Estoy insertando en este DIV usando la propiedad 'Inntext' ";

Producción

Se trata de insertar HTML en un DIV usando JavaScript.

Conclusión

Para insertar etiquetas HTML y texto en un elemento HTML div, use el "innerhtml"La propiedad, y para insertar solo texto en el elemento div, usa el"intexto" propiedad. Este artículo describió las formas de insertar un HTML en un DIV usando JavaScript.