Atributo innerHTML del elemento HTML DOM

Definición y uso

innerHTML Atributo que establece o devuelve el contenido HTML del elemento (HTML interno).

Vea también:

Atributo innerText

Atributo textContent

Ejemplo

Ejemplo 1

Obtener el contenido HTML del elemento con id="myP":

let html = document.getElementById("myP").innerHTML;

Prueba por ti mismo

Ejemplo 2

Cambiar el contenido HTML del elemento con id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

Prueba por ti mismo

Ejemplo 3

Obtener el contenido HTML del elemento <ul> con id="myList":

let html = document.getElementById("myList").innerHTML;

Prueba por ti mismo

Ejemplo 4

Eliminar el contenido HTML del elemento <p> con id="demo":

element.innerHTML = "";

Prueba por ti mismo

Ejemplo 5

Cambiar el contenido HTML de dos elementos:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

Prueba por ti mismo

Ejemplo 6

Repetir el contenido HTML del elemento:

element.innerHTML += element.innerHTML;

Prueba por ti mismo

Ejemplo 7

Cambiar el contenido HTML y la URL del enlace:

element.innerHTML = "W3School";
element.href = "";

Prueba por ti mismo

Sintaxis

Devolver la propiedad innerHTML:

elemento.innerHTML

Establecer la propiedad innerHTML:

elemento.innerHTML = text

Valor de atributo

Valor Descripción
Cadena. Contenido HTML.

Valor de retorno

Tipo Descripción
Cadena El contenido HTML del elemento.

Diferencias entre innerHTML, innerText y textContent

La propiedad innerText devuelve:

Sólo devuelve el contenido de texto de los elementos y todos sus subelementos, sin espacio en blanco oculto CSS y etiquetas, excepto los elementos <script> y <style>.

La propiedad innerHTML devuelve:

El contenido de texto del elemento, incluyendo todos los espacios en blanco y las etiquetas HTML internas.

La propiedad textContent devuelve:

El contenido de texto de los elementos y todos sus descendientes, con espacios en blanco y texto oculto CSS, pero sin etiquetas.

Ejemplo HTML

<p id="myP">   Este elemento tiene espacio adicional y contiene <span>un elemento <span>span</span></span>.</p>

Ejemplos de JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Prueba por ti mismo

En el ejemplo anterior:

La propiedad innerText devuelve:

Este elemento tiene espacio adicional y contiene un elemento <span>span</span>.

La propiedad innerHTML devuelve:

   Este elemento tiene espacio adicional y contiene <span>un elemento <span>span</span></span>.

La propiedad textContent devuelve:

   Este elemento tiene espacio adicional y contiene un elemento <span>span</span>.

Soporte del navegador

Todos los navegadores lo admiten elemento.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte