Element.innerHTML

A propriedade Element.innerHTML define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.

Nota: Se um n√≥ <div>, <span>, ou <noembed> tem um n√≥ filho que inclui os caracteres (&), (<), ou (>), o innerHTML retornar√° esses caracteres como &amp, &lt e &gt respectivamente. Utilize Node.textContent para recuperar uma c√≥pia correta do conte√ļdo desses n√≥s de texto.

Sintaxe

var content = element.innerHTML;

No retorno, content contém o código HTML serializado descrevendo todos os descendentes dos elementos.

 element.innerHTML = content;

Remove todos os elementos filhos, analisa o conte√ļdo da string e atribui os n√≥s resultantes como filhos do elemento.

Exceptions

SyntaxError
Foi feita uma tentativa de definir o valor de um innerHTML usando uma string que n√£o √© HTML.
NoModificationAllowedError
Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um Document.

Exemplo

<html>
<head></head>
<body>

<div id="txt">
  <script     id="txt0"> x=0 </script>
    <noembed    id="txt1"> 1   </noembed>
    <noframes   id="txt2"> 2   </noframes>
    <noscript   id="txt3"> 3   </noscript>
    <div        id="txt4"> 4   </div>
    <div>
      <noscript id="txt5"> 5   </noscript>
    </div>
    <span       id="txt6"> 6   </span>
  </div>

  <div id="innerHTMLtxt"></div>
<div id="textContenttxt"><div>

<script>
for (i = 0; i < 7; i++) {
    x = "txt" + i;
    document.getElementById(x).firstChild.nodeValue = '&<>';
}

document.getElementById("innerHTMLtxt").textContent = document.getElementById("txt").innerHTML
document.getElementById("textContenttxt").textContent = document.getElementById("txt").textContent
</script>

<body>
</html>
// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

const d = document.getElementById("d");
dump(d.innerHTML);

//  a string "<p>Content</p><p>Further Elaborated</p>"
// é exibida na janela do console

Notas

Essa propriedade fornece uma forma simples de trocar completamente o conte√ļdo de um elemento. Por exemplo, o conte√ļdo inteiro do elemento body pode ser exclu√≠do ao fazer:

// Troca o conte√ļdo de body por uma string vazia.
document.body.innerHTML = "";  

A propriedade innerHTML de v√°rios tipos de elementos ‚ÄĒ incluindo <body> ou <html> ‚ÄĒ pode ser retornada ou trocada. Essa tamb√©m pode ser usada para ver o c√≥digo fonte de uma p√°gina que foi modificada dinamicamente:

// Copie e cole este c√≥digo, em uma √ļnica linha, na barra de endere√ßos
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

Essa propriedade foi implementada inicialmente pelos navegadores web, e ent√£o especificada pela WHATWG e W3C no HTML5. Implementa√ß√Ķes antigas talvez n√£o tenham implementado-a exatamente da mesma forma. Por exemplo, quando um texto √© inserido em uma caixa de texto, o Internet Explorer muda o valor do atributo innerHTML dessa entrada, mas os navegadores Gecko n√£o.

Considera√ß√Ķes de seguran√ßa

Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.

var name = "John";

// presumindo que el é um elemento DOM HTML
el.innerHTML = name; // inofensivo, nesse caso

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // inofensivo, nesse caso

Embora isso talvez se pare√ßa como um ataque  cross-site scripting, o resultado √© inofensivo. O HTML5 especifica que uma tag <script>, inserida via innerHTML, n√£o deve ser executada.

No entanto, há formas de se executar JavaScript sem usar elementos <script>, por isso ainda há um risco de segurança sempre que você usa innerHTML para definir uma string sobre a qual você não tem controle. Por exemplo:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // exibe uma caixa de alerta

Por essa raz√£o, recomenda-se que voc√™ n√£o use o innerHTML quando estiver inserindo texto puro; como alternativa, utilize node.textContent. Isso n√£o interpreta o conte√ļdo passado como HTML, mas em vez disso, insere-o como texto puro.

Especificação

Especificação Estado Comentário
DOM Parsing and Serialization
The definition of 'Element.innerHTML' in that specification.
Rascunho atual Definição inicial

Veja também

  • innerDOM - Para aqueles que desejam aderir aos padr√Ķes, aqui oferece um conjunto de fun√ß√Ķes JavaScript para serializar ou analisar XML, de modo a configurar o conte√ļdo do elemento definido como uma string(s) atrav√©s do DOM ou recuperando o conte√ļdo do elemento obtido a partir do DOM como uma string.
  • insertAdjacentHTML - Uma alternativa para o innerHTML, permitindo voc√™ anexar um novo HTML, ao inv√©s de troc√°-la.
  • jssaxparser - Uma solu√ß√£o mais robusta (embora mais pesada) do innerDOM (suporta an√°lise com namespaces, atributos com aspas simples, se√ß√Ķes CDATA, etc.), esse √© o analisador SAX2 quando usado com seu manipulador de conte√ļdo DOM. (Oferece String para DOM; DOM para String √© significantemente mais f√°cil)
  • Considera√ß√Ķes de efici√™ncia: Em quirksmode