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
|
---
title: Element.insertAdjacentHTML()
slug: Web/API/Element/insertAdjacentHTML
translation_of: Web/API/Element/insertAdjacentHTML
---
<div>{{APIRef("DOM")}}</div>
<h2 id="Summary" name="Summary">Resumo</h2>
<p><code>insertAdjacentHTML </code>analisa o texto especificado como HTML ou XML e insere os nós que resultam na árvore DOM em uma posição especificada. Não reanalisa o elemento que está a ser utilizado e, portanto, não corrompe os elementos existentes dentro do elemento. Esta, e evitando a etapa extra de serialização, torna-o muito mais rápido do que a manipulação direta innerHTML.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre><em>element</em>.insertAdjacentHTML(<em>posição</em>, <em>texto</em>);</pre>
<p><strong><code>Posição</code></strong> é a posição em relação ao elemento, e deve ser um dos seguintes tipos:</p>
<dl>
<dt><code>'beforebegin'</code></dt>
<dd>Antes do elemento.</dd>
<dt><code>'afterbegin'</code></dt>
<dd>Dentro do elemento, antes de seu primeiro filho (childNode).</dd>
<dt><code>'beforeend'</code></dt>
<dd>Dentro do elemento, após seu último filho (childNode) .</dd>
<dt><code>'afterend'</code></dt>
<dd>Após o elemento.</dd>
</dl>
<p><code><strong>texto</strong> </code>é a string a ser analisada como HTML ou XML e inserido na árvore.</p>
<h3 id="Visualização_da_posição_de_nomes">Visualização da posição de nomes</h3>
<pre class="brush: html"><!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend --></pre>
<div class="note"><strong>Nota:</strong> As posições beforeBegin e afterEnd funcionam apenas se o nó está em uma árvore DOM e tem um elemento pai.</div>
<h2 id="Example" name="Example">Exemplo</h2>
<pre class="brush: js">// Estrutura inicial:
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// Neste ponto, a nova estrutura é:
// <div id="one">one</div>
// <div id="two">two</div></pre>
<h2 id="Specification" name="Specification">Especificação</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td>
<td>{{ Spec2('DOM Parsing') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de Navegadores</h2>
<h2 id="Browser_Compatibility" name="Browser_Compatibility"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{ CompatibilityTable() }}</span></h2>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("8.0") }}</td>
<td>4.0*</td>
<td>7.0</td>
<td>4.0 (527)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th> Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("8.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
<p> </p>
<h3 id="Questão_no_IE">Questão no IE:</h3>
<ul>
<li>No IE8, as mudanças no dom são feitas somente depois do JS ter terminado de carregar, então se você precisa acessar os nós gerados, terá que fazê-lo de uma forma assíncrona.</li>
</ul>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{domxref("Node.insertBefore()")}}</li>
<li>{{domxref("Node.appendChild()")}} (mesmo efeito de <code>beforeend</code>)</li>
<li><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> por Henri Sivonen incluem benchmarks que demonstram que insertAdjacentHTML pode ser bem rápido em alguns casos.</span></li>
</ul>
|
