I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Le proprietà innerHTML e outerHTML DOM ti consentono di leggere e scrivere contenuti su una pagina web. Puoi usarli per recuperare il markup o apportare modifiche ad esso, e i due sono simili in molti modi. Ma c'è una differenza significativa.

Quando lavori con il DOM, utilizzerai innerHTML e outerHTML in modo piuttosto diverso. Scopri come utilizzare queste due proprietà con esempi pratici.

Cos'è l'HTML interno?

La proprietà innerHTML fa parte di il DOM e puoi accedervi tramite JavaScript. Puoi usarlo per ottenere o impostare il contenuto di un elemento. Questo contenuto esclude il tag dell'elemento e include solo il markup che rappresenta i figli dell'elemento, sotto forma di stringa.

Considera questo esempio di codice:

<html>
<corpo>
<Pid="miaP">Sono un paragrafo.P>


<copione>
documento.getElementById("miaP").innerHTML = "Ciao mondo";
copione>
corpo>


html>
instagram viewer

Nel tuo browser, vedrai un paragrafo standard con il testo sostitutivo, in questo modo:

La proprietà innerHTML seleziona e modifica il contenuto del fileelemento in questo esempio.

Cos'è l'HTML esterno?

La proprietà outerHTML è come innerHTML in molti modi. Puoi usarlo per ottenere o impostare il contenuto di un elemento selezionato. Tuttavia, imposta anche il markup che rappresenta l'elemento stesso. Ciò include il tag di apertura, qualsiasi proprietà e, se pertinente, il tag di chiusura.

Rivisita l'esempio precedente per vedere in che modo outerHTML differisce:

<html>
<corpo>
<Pid="miaP">Sono un paragrafo.P>


<copione>
documento.getElementById("miaP").outerHTML = "
Questo H1 ha sostituito un paragrafo.
"
copione>
corpo>
html>

Nel tuo browser, dovresti vedere qualcosa di simile a questo:

In questo esempio, la proprietà outerHTML modifica il file P elemento in un h1 elemento.

Conoscere la differenza e quando utilizzare queste proprietà

Le proprietà DOM innerHTML e outerHTML hanno molte somiglianze, ma una differenza fondamentale. La proprietà innerHTML acquisisce il contenuto HTML di un elemento. Al contrario, la proprietà outerHTML cattura l'HTML che rappresenta l'elemento stesso e il suo contenuto.

Puoi utilizzare queste proprietà per leggere e scrivere contenuto HTML tramite il DOM. Il DOM sarà un concetto comune e importante durante tutto il processo di sviluppo di JavaScript.