diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/api/element/insertadjacenthtml | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pl/web/api/element/insertadjacenthtml')
-rw-r--r-- | files/pl/web/api/element/insertadjacenthtml/index.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/files/pl/web/api/element/insertadjacenthtml/index.html b/files/pl/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..c3332ed337 --- /dev/null +++ b/files/pl/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,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> |