Incrustar HTML en JavaScript

El lenguaje de marcado de hipertexto está en la raíz de todas las páginas web que se muestran en Internet. El HTML DOM se actualiza automáticamente cambiando los nodos del DOM.

Esto se puede hacer actualizando la estructura DOM existente o agregando nuevos nodos. En la publicación de hoy, aprenderemos sobre cómo incrustar HTML en JavaScript.

Incrustar HTML en JavaScript

La propiedad innerHTML del elemento obtiene o establece el marcado HTML o XML contenido en el elemento.

Para insertar el HTML en el documento, en lugar de reemplazar el contenido de un elemento, utilice el método insertAdjacentHTML().

Una vez que se establece el innerHTML, se eliminan todos los descendientes del elemento. innerHTML los reemplaza con nodos creados al analizar el HTML proporcionado en la cadena htmlString.

Devuelve la serialización HTML de los descendientes del elemento como una cadena.

Los siguientes pasos se ejecutarán después de configurar innerHTML en segundo plano.

1. El valor dado se analiza como HTML o XML (según el tipo de documento), lo que da como resultado un objeto DocumentFragment que representa el nuevo conjunto de nodos DOM para los nuevos elementos.
2. Si el elemento cuyo contenido se reemplaza es un elemento de plantilla, el atributo de contenido del elemento de plantilla se reemplaza con el nuevo DocumentFragment creado en el paso 1.
3. Para todos los demás elementos, el contenido del elemento se reemplaza con los nodos en el nuevo DocumentFragment.

Se arroja un SyntaxError si se intenta establecer el valor de innerHTML utilizando una cadena HTML no formada correctamente. Puede encontrar más información sobre la documentación innerHTML para innerHTML.

Entendamos eso con un ejemplo.

<div id="list-id"></div>

document.getElementById('list-id').innerHTML =
    '<ol><li>html data</li><li>JS data</li></ol>';

En el código anterior, hemos definido una etiqueta div. Puede acceder a la etiqueta div usando getElementById y agregar la lista ordenada accediendo a la propiedad innerHTML de la etiqueta div.

Producción :

1. html data
2. JS data

Demostración aquí