La proprietà esterno in javascript

A volte gli sviluppatori devono sostituire il codice sorgente di un elemento con testo in formato HTML o accedere al codice sorgente di un elemento in fase di esecuzione. A tale scopo, utilizzare la proprietà esterna che è simile all'elemento.Innerhtml. La differenza principale tra queste due proprietà è che InnerHTML accede al contenuto di testo semplice di un elemento senza tag HTML, mentre la proprietà esterno deve essere utilizzata se sono necessari tag HTML.

Questo studio spiegherà la proprietà esterno in javascript.

Qual è la proprietà esterno in javascript?

IL "esterhtml"È la proprietà JavaScript dell'interfaccia DOM che fornisce il componente HTML dell'elemento. Insieme al testo, comprende anche la struttura HTML completa dell'elemento, comprese i tag di apertura e chiusura. Inoltre, utilizzando la proprietà esterna, è possibile accedere o modificare la struttura HTML dell'elemento.

Come utilizzare la proprietà esternahtml in javascript?

Segui la sintassi data per ottenere il contenuto HTML utilizzando la proprietà esterhtml:

elemento.esterhtml

La seguente sintassi viene utilizzata per l'impostazione del contenuto HTML utilizzando la proprietà esterhtml:

elemento.esterhtml = htmlstring;

Esempio 1: Ottieni la struttura HTML usando la proprietà esterna

Nel seguente esempio otterremo il contenuto dell'elemento utilizzando la proprietà esterna. Qui, creeremo prima un "div"Elemento che utilizza il tag HTML e assegna un ID"div"Che contiene più elementi, tra cui un'intestazione, etichetta e pulsante. C'è un evento OnClick allegato al pulsante, che invocherà la funzione definita denominata "getContentByouterHtml ()"Per mostrare la struttura completa dell'elemento HTML:

Benvenuto in = "Color: Red"> LinuxHint.

È il migliore = "Color: Green"> Sito web Per imparare e lucidare il tuo = "Color: Green"> Abilità!


Clicca qui!

Successivamente, definisci il “getContentByouterHtml ()"Funzione che si innescherà sul"al clic"Evento. Mostrerà il contenuto dell'elemento del div, compresi tutti i tag. Nella funzione, prima passeremo il "div"ID del contenitore al"getElementById ()"Metodo come argomento, quindi, mostra il contenuto dell'elemento nel metodo Alert () chiamando la proprietà esterna:

funzione getContentByOuterHtml ()
var getcont = documento.getElementById ("div");
Avviso ("esterno html: \ n" + getcont.esterhtml);

L'output mostra la struttura completa dell'elemento, inclusi i suoi elementi figlio:

Esempio 2: imposta e ottieni la struttura HTML usando la proprietà esterna

In questo esempio, imposteremo alcuni contenuti sulla DOM utilizzando la proprietà JavaScript OuterHTML e quindi ottenere la struttura completa dell'elemento specificato.

Qui creeremo due pulsanti, uno è "Impostato!"Ciò attiverà il"setOuterHtml ()"Funzione su un"al clic"Evento e imposta alcuni contenuti sul DOM, e il secondo pulsante è"Ottenere"Ciò otterrà la struttura completa dell'elemento innescando il"getContentByouterHtml ()" funzione:

Imposta e ottieni il contenuto come esterno:

Impostato!
Ottenere

Nel file JavaScript, definisce due funzioni, il "setOuterHtml ()" e il "getContentByouterHtml ()". Nella funzione setouterHtml (), impostare il contenuto con

Tag usando la sintassi della proprietà set esterno come elemento figlio dell'elemento:

funzione setOuterHtml ()
var setCont = documento.getElementById ("set");
SetCont.esterhtml = "

È il miglior sito web per imparare e lucidare le tue abilità!

";

Quindi, nella funzione getContentByouterHtml (), ottieni la struttura completa dell'elemento utilizzando la sintassi della proprietà GET esterhtml:

funzione getContentByOuterHtml ()
var getcont = documento.getElementById ("div");
Avviso (getCont.esterhtml);

Produzione

Abbiamo coperto tutte le informazioni essenziali sulla proprietà JavaScript esterna.

Conclusione

IL "esterhtml"È la proprietà JavaScript dell'interfaccia DOM che fornisce la struttura HTML completa dell'elemento, compresi i tag di apertura e chiusura. È simile alla proprietà InnerHTML, ma la differenza tra loro è che InnerHTML accede al contenuto di testo semplice di un elemento senza tag HTML, mentre la proprietà esterno ottiene il contenuto con i tag HTML. In questo studio, abbiamo spiegato la proprietà esterna in javascript.