Actualice el marcado HTML de un elemento DOM con JavaScript

En JavaScript, el innerHTML del elemento HTML La propiedad se puede usar para establecer u obtener el marcado HTML dentro del elemento. Esta propiedad devuelve una cadena DOM que contiene la serialización HTML de todos los elementos secundarios.

Si establece un nuevo valor de innerHTML , eliminará todos los nodos secundarios del elemento y los reemplazará con nodos HTML creados al analizar la cadena HTML.

Digamos que tenemos el siguiente <div> elemento en algún lugar del documento:

<div id="hint">
    <p>Learn JavaScript for free!</p>
</div>

Para obtener el marcado HTML actual del HTML anterior, use el siguiente JavaScript:

// grab element
const div = document.querySelector('#hint');

// get current HTML markup
console.log(div.innerHTML);

// <p>Learn JavaScript for free!</p>

Para reemplazar el marcado HTML existente completamente, simplemente establezca un nuevo valor de innerHTML como a continuación:

// replace existing markup
div.innerHTML = 'span>Hey, there!</span>';

Para añadir nuevos elementos antes el marcado HTML actual, haga lo siguiente:

div.innerHTML = 'span>Hey, there!</span>' + div.innerHTML;

Para añadir contenido HTML después el marcado existente:

div.innerHTML += 'span>Hey, there!</span>';

El nuevo marcado puede ser cualquier válido Cadena HTML, incluido texto sin formato simple:

div.innerHTML = 'This is plain text';

Leer a continuación: Cómo crear un elemento DOM usando JavaScript