Element.innerHTML
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
* Some parts of this feature may have varying levels of support.
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 &, < e > respectivamente. UtilizeNode.textContentpara 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
innerHTMLusando 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, "<") + "</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ções
| Specification |
|---|
| HTML # dom-element-innerhtml |
Compatibilidade com navegadores
Loading…
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