Proprietà InnerHTML in JavaScript

La proprietà InnerHTML consente la manipolazione del contenuto HTML in vari modi. L'innerHTML consente all'utente di impostare/aggiornare il contenuto HTML o ottenere il contenuto di un elemento HTML. La proprietà InnerHTML utilizza il metodo getElementById per identificare l'elemento ed eseguire un'operazione pertinente.

Per una migliore comprensione, abbiamo diviso l'articolo in vari blocchi per dimostrare in dettaglio l'uso della proprietà InnerHTML:

• Come funziona la proprietà InnerHTML in JavaScript
• Come ottenere il contenuto di un elemento utilizzando la proprietà InnerHTML
• Come impostare il contenuto di un elemento utilizzando la proprietà InnerHTML
• Come aggiornare il contenuto di un elemento utilizzando la proprietà InnerHTML

Come funziona la proprietà InnerHTML in JavaScript

La proprietà InnerHTML imposta/aggiorna o restituisce il contenuto HTML di un elemento. Entrambe le funzionalità di una proprietà InnerHTML hanno sintassi diverse fornite di seguito.

Per ottenere il contenuto HTML:

HtmlObject.Innerhtml;

Per impostare/aggiornare il contenuto HTML:

HtmlObject.InnerHtml = "New-Val";

Nelle sintassi sopra, il HtmlObject L'istanza identifica l'elemento HTML su cui verrà applicato l'interno. E l'elemento viene identificato usando il getelementbyid metodo. Mentre il New-Val è un valore che verrebbe impostato su un elemento HTML.

Come utilizzare la proprietà InnerHTML in JavaScript

Questa sezione arruola vari esempi che dimostrano l'uso della proprietà InnerHTML in JavaScript.

Come utilizzare la proprietà InnerHTML per aggiornare il contenuto HTML

I seguenti frammenti di codice dimostrano il funzionamento della proprietà InnerHTML per aggiornare il contenuto HTML.

Html

Benvenuti in Linuxhint

Clicca qui per ottenere

Il codice sopra ha un H4 elemento con id = "H"E un pulsante con al clic attributo.

JavaScript

funzione get ()
Avviso (documento.getElementById ("H").Innerhtml);

Il codice JavaScript di cui sopra crea una funzione get () e contiene un avviso che mostrerebbe il contenuto di Element ID = "H".

Produzione

L'output mostra che il contenuto di un elemento HTML viene visualizzato come contenuto di avviso.

Come utilizzare la proprietà InnerHTML per aggiornare il contenuto HTML

In questa sezione, imparerai ad aggiornare il contenuto di un elemento HTML utilizzando la proprietà InnerHTML.

Html

Linuxhint

Clicca qui per aggiornare

Il codice sopra crea un paragrafo con id = "P1"E un pulsante con un al clic attributo.

JavaScript

Funzione Update ()
documento.getElementById ("P1").InnerHtml = "Welcome! La proprietà InnerHTML viene utilizzata! ";

Il codice JS scritto sopra crea una funzione denominata aggiornamento() che verrà invocato sul clic del pulsante per applicare la proprietà InnerHTML sull'elemento (paragrafo) ID = "P1".

Produzione

Dall'output, si osserva che il contenuto del paragrafo viene aggiornato.

Come utilizzare la proprietà InnerHTML per impostare il contenuto HTML

Qui mostreremo come InnerHTML imposta il contenuto di un elemento HTML. Per questo, il codice HTML e JavaScript praticato in questa sezione sono elaborati di seguito.

Html

Questo è un paragrafo

Clicca qui per impostare il contenuto

Il codice HTML sopra ha due paragrafi in cui il valore del primo paragrafo (id = "P1") Verrà utilizzato per impostare il valore del secondo paragrafo (id ="P2").

Nota: IL div Nel codice sopra è solo per motivi di sottovalutazione.

JavaScript

funzione set ()
const vecchio = documento.getElementById ("P1").Innerhtml;
documento.getElementById ("P2").InnerHtml = vecchio;

Viene creata una funzione set () che ha due dichiarazioni. La prima affermazione ottiene il contenuto dal paragrafo (id = "P1“) E lo salva in una variabile (vecchio). E la seconda istruzione imposta il valore della variabile al paragrafo (id = "P2").

Produzione

Dall'output sopra, il paragrafo non ha nulla da mostrare se non facendo clic sul pulsante il contenuto del paragrafo (Id = "P1") È impostato sul paragrafo (id ="P2")

Conclusione

La proprietà InnerHTML di JavaScript consente di ottenere o aggiornare/impostare il contenuto di un elemento HTML. Utilizzando il metodo getElementByID, la proprietà InnerHTML identifica un elemento HTML. In questo articolo, la proprietà InnerHTML di JavaScript è dimostrata in breve modo. Ogni sottosezione qui presenta la funzionalità della proprietà InnerHTML per ottenere, aggiornare o impostare il contenuto di un elemento HTML.