diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/web/api/element/insertadjacenthtml | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/it/web/api/element/insertadjacenthtml')
| -rw-r--r-- | files/it/web/api/element/insertadjacenthtml/index.html | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..f69fbb1daf --- /dev/null +++ b/files/it/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,102 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiare il DOM + - DOM + - Element + - HTML + - Inserire elementi + - Inserire nodi + - Referenza + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p>Il metodo <strong><code>insertAdjacentHTML()</code></strong> dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>position</code></dt> + <dd>Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad <code>element</code>; deve essere una delle seguenti stringhe: + <ul> + <li><code style="color: red;">'beforebegin'</code>: Davanti ad <code>element</code> stesso.</li> + <li><code style="color: green;">'afterbegin'</code>: Appena dentro <code>element</code>, prima del suo primo figlio.</li> + <li><code style="color: blue;">'beforeend'</code>: Appena dentro <code>element</code>, prima del suo ultimo figlio.</li> + <li><code style="color: magenta;">'afterend'</code>: Dopo ad <code>element</code> stesso.</li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>La stringa da analizzare come HTML o XML e inserita nell'albero.</dd> +</dl> + +<h3 id="Visualizzazione_dei_nomi_delle_posizioni">Visualizzazione dei nomi delle posizioni</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> Le posizioni <code>beforebegin</code> e <code>afterend</code> funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.</div> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// A questo punto, la nuova struttura è: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Note">Note</h2> + +<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3> + +<p>Quando si inserisce HTML in una pagina utilizzando <code>insertAdjacentHTML()</code>, fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.</p> + +<p>Non è consigliabile utilizzare <code>insertAdjacentHTML()</code> quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</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="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("XMLSerializer")}}: Costruire una rappresentazione DOM del testo XML</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"> di Henri Sivonen, incluso benchmark che mostra che insertAdjacentHTML può essere molto più veloce in alcuni casi.</span></li> +</ul> |
