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
|
---
title: Element.insertAdjacentHTML()
slug: Web/API/Element/insertAdjacentHTML
translation_of: Web/API/Element/insertAdjacentHTML
---
<div>{{APIRef("DOM")}}</div>
<p><strong><code>insertAdjacentHTML()</code></strong> metoda z {{domxref("Element")}} interfejsu analizuje specyficzny tekst jak HTML albo XML, wstawia wynik w drzewo DOM w określonej pozycji. to nie naprawia elementu jest użyty na a zatem nie jest zepsuty istniejący element w środku elementu. To unika ekstra kroków z serializacją, zrobienie tego jest wiele szybsze niż bezpośredni {{domxref("Element.innerHTML", "innerHTML")}} manipulation.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
<h3 id="Parametry">Parametry</h3>
<dl>
<dt><code>position</code></dt>
<dd>A {{domxref("DOMString")}} reprezentuje pozycję relatywną <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">element</span></font>-u musi być must be jeden z następujących ciągów:
<ul>
<li><code style="color: red;">'beforebegin'</code>: przed <code>element</code> -em.</li>
<li><code style="color: green;">'afterbegin'</code>: W środku <code>element</code>-u przed jego pierwszym dzieckiem.</li>
<li><code style="color: blue;">'beforeend'</code>: W środku elementu po jego ostatnim dziecku.</li>
<li><code style="color: magenta;">'afterend'</code>: Po <code>element</code>-cie </li>
</ul>
</dd>
<dt><code>text</code></dt>
<dd>string analizuje HTML albo XML i włącza w drzewo.</dd>
</dl>
<h3 id="Visualization_of_position_names">Visualization of position names</h3>
<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> -->
<code style="font-weight: bold;"><p></code>
<!-- <strong><code style="color: green;">afterbegin</code></strong> -->
foo
<!-- <strong><code style="color: blue;">beforeend</code></strong> -->
<code style="font-weight: bold;"></p></code>
<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre>
<div class="note"><strong>Note: </strong><code>beforebegin</code> i <code>afterend</code> pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.</div>
<h2 id="Przykład">Przykład:</h2>
<pre class="brush: js">// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div></pre>
<h2 id="Notes">Notes</h2>
<h3 id="Security_considerations">Security considerations</h3>
<p>When inserting HTML into a page by using <code>insertAdjacentHTML()</code>, be careful not to use user input that hasn't been escaped.</p>
<p>It is not recommended you use <code>insertAdjacentHTML()</code> when inserting plain text; instead, use the {{domxref("Node.textContent")}} property or the {{domxref("Element.insertAdjacentText()")}} method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.</p>
<h2 id="Specification">Specification</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', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
<td>{{ Spec2('DOM Parsing') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("Element.insertAdjacentElement()")}}</li>
<li>{{domxref("Element.insertAdjacentText()")}}</li>
<li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li>
<li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li>
</ul>
|
