1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: Element.innerHTML
slug: Web/API/Element/innerHTML
tags:
- API
- DOM
- Gecko
- NeedsBrowserCompatibility
- Propriedade
- Referência(2)
translation_of: Web/API/Element/innerHTML
---
<p>{{APIRef("DOM")}}</p>
<p>A propriedade <strong><code>Element.innerHTML</code></strong> define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.</p>
<div class="note"><strong>Nota: </strong>Se um nó {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} tem um nó filho que inclui os caracteres (&), (<), ou (>), o innerHTML retornará esses caracteres como &amp, &lt e &gt respectivamente. Utilize {{domxref("Node.textContent")}} para recuperar uma cópia correta do conteúdo desses nós de texto.</div>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox notranslate"><em>var content</em> = <em>element</em>.innerHTML;</pre>
<p>No retorno, <code>content</code> contém o código HTML serializado descrevendo todos os descendentes dos elementos.</p>
<pre class="syntaxbox notranslate"><em> element</em>.innerHTML = content;</pre>
<p>Remove todos os elementos filhos, analisa o conteúdo da string e atribui os nós resultantes como filhos do elemento.</p>
<h3 id="Exceptions">Exceptions</h3>
<dl>
<dt><strong><code>SyntaxError</code></strong></dt>
<dd>Foi feita uma tentativa de definir o valor de um <code>innerHTML</code> usando uma string que não é HTML.</dd>
<dt><code>NoModificationAllowedError</code></dt>
<dd>Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um {{domxref("Document")}}.</dd>
</dl>
<h2 id="Example" name="Example">Exemplo</h2>
<pre class="brush: html notranslate"><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></pre>
<pre class="brush: js notranslate">// 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
</pre>
<h2 id="Notes" name="Notes">Notas</h2>
<p>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:</p>
<pre class="brush: js notranslate">// Troca o conteúdo de body por uma string vazia.
document.body.innerHTML = ""; </pre>
<p>A propriedade <code>innerHTML</code> de vários tipos de elementos — incluindo {{HTMLElement("body")}} ou {{HTMLElement("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:</p>
<pre class="brush: js notranslate">// Copie e cole este código, em uma única linha, na barra de endereços
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";
</pre>
<p>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.</p>
<h3 id="Considerações_de_segurança">Considerações de segurança</h3>
<p>Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.</p>
<pre class="brush: js notranslate">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</pre>
<p>Embora isso talvez se pareça como um ataque {{interwiki("wikipedia", "cross-site scripting")}}, o resultado é inofensivo. O HTML5 especifica que uma tag {{HTMLElement("script")}}, inserida via <code>innerHTML</code>, <a href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">não deve ser executada</a>.</p>
<p>No entanto, há formas de se executar JavaScript sem usar elementos {{HTMLElement("script")}}, por isso ainda há um risco de segurança sempre que você usa <code>innerHTML</code> para definir uma string sobre a qual você não tem controle. Por exemplo:</p>
<pre class="brush: js notranslate" style="font-size: 14px;">const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // exibe uma caixa de alerta</pre>
<p>Por essa razão, recomenda-se que você não use o <code>innerHTML</code> quando estiver inserindo texto puro; como alternativa, utilize {{domxref("node.textContent")}}. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.</p>
<h2 id="Specification" name="Specification">Especificação</h2>
<table class="standard-table">
<thead>
<tr style="background-color: rgb(255, 204, 255);">
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td>
<td>{{ Spec2('DOM Parsing') }}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<h2 id="See_also" name="See_also">Veja também</h2>
<ul>
<li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - 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.</li>
<li><a href="/en-US/docs/DOM/Element.insertAdjacentHTML" title="/en-US/docs/DOM/Element.insertAdjacentHTML">insertAdjacentHTML</a> - Uma alternativa para o innerHTML, permitindo você anexar um novo HTML, ao invés de trocá-la.</li>
<li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - 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 é <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significantemente mais fácil</a>)</li>
<li>Considerações de eficiência: Em <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html">quirksmode</a></li>
</ul>
|
