Outerhtml -eiendommen i JavaScript

Noen ganger må utviklere erstatte et elements kildekode med HTML-formatert tekst eller få tilgang til kildekoden til et element ved kjøretid. For dette formålet, bruk Outerhtml -egenskapen som ligner på elementet.indrehtml. Hovedforskjellen mellom disse to egenskapene er at InnerHTML får tilgang til et elements vanlige tekstinnhold uten HTML -tagger, mens Outerhtml -egenskapen skal brukes hvis du trenger HTML -koder.

Denne studien vil forklare Exterhtml -egenskapen i JavaScript.

Hva er Outerhtml -egenskapen i JavaScript?

“Outerhtml”Er JavaScript -egenskapen til DOM -grensesnittet som gir elementets HTML -komponent. Sammen med teksten omfatter den også elementets komplette HTML -struktur, inkludert åpnings- og lukkekoder. Ved å bruke Exterhtml -egenskapen kan du dessuten få tilgang til eller endre elementets HTML -struktur.

Hvordan du bruker Exterhtml -egenskapen i JavaScript?

Følg den gitte syntaks for å få HTML -innholdet ved å bruke Outerhtml -egenskapen:

element.Outerhtml

Følgende syntaks brukes til å stille inn HTML -innholdet ved hjelp av Outerhtml -egenskapen:

element.ytrehtml = htmlString;

Eksempel 1: Få HTML -struktur ved hjelp av Outerhtml -eiendommen

I det følgende eksemplet vil vi få elementets innhold ved å bruke Outerhtml -egenskapen. Her vil vi først lage en “div”Element ved hjelp av HTML -tag og tilordne en ID”div”Det inneholder flere elementer, inkludert en overskrift, etikett og knapp. Det er en OnClick -hendelse vedlagt med knappen, som vil påkalle den definerte funksjonen som heter “getContentByoUterhtml ()”For å vise den komplette strukturen til HTML -elementet:

Velkommen til = "Color: Red"> Linuxhint.

Det er den beste = "Color: Green"> Nettstedet å lære og polere din = "farge: grønn"> ferdigheter!


Klikk her!

Deretter definerer du "getContentByoUterhtml ()”Funksjon som vil utløse på“ved trykk" begivenhet. Det vil vise innholdet i divens element, inkludert alle tagger. I funksjonen vil vi først passere "div”Id av beholderen til“getElementById ()”Metode som et argument viser deretter elementets innhold i Alert () -metoden ved å kalle Outerhtml -egenskap:

funksjon getContentByoUterHtml ()
var getCont = dokument.getElementById ("Div");
Alert ("Ytre HTML: \ n” + getCont.ytrehtml);

Utgangen viser den komplette strukturen til elementet inkludert barnelementene:

Eksempel 2: Sett og få HTML -struktur ved hjelp av Outerhtml -eiendommen

I dette eksemplet vil vi sette litt innhold på DOM ved hjelp av JavaScript Outerhtml -egenskap og deretter få den komplette strukturen til det spesifiserte elementet.

Her vil vi lage to knapper, en er “Sett!”Det vil utløse“setoUterhtml ()”Funksjon på en“ved trykk”Hendelse og setter litt innhold på DOM, og den andre knappen er“Få”Det vil få den komplette strukturen til elementet ved å utløse“getContentByoUterhtml ()”Funksjon:

Sett og få innholdet som Outerhtml:

Sett!
Få

I JavaScript -fil, definere to funksjoner, "setoUterhtml ()" og "getContentByoUterhtml ()”. I setoUterhtml () -funksjonen, sett innholdet med

Tagg ved hjelp av SET Outerhtml -egenskapssyntaks som et barnelement i elementet:

funksjon setoUterhtml ()
var setcont = dokument.getElementById ("sett");
setcont.Outerhtml = "

Det er det beste nettstedet å lære og polere ferdighetene dine!

";

Deretter, i getContentByoUterHTML () -funksjonen, får du den komplette strukturen til elementet ved å bruke Syntaxen Get Outerhtml -egenskapen:

funksjon getContentByoUterHtml ()
var getCont = dokument.getElementById ("Div");
Varsel (GetCont.ytrehtml);

Produksjon

Vi har dekket all viktig informasjon om Outerhtml JavaScript -eiendom.

Konklusjon

“Outerhtml”Er JavaScript -egenskapen til DOM -grensesnittet som gir den komplette HTML -strukturen til elementet, inkludert åpnings- og lukkekoder. Det ligner på InnerHTML -egenskapen, men forskjellen mellom dem er at InnerHTML får tilgang til et elements vanlige tekstinnhold uten HTML -tagger, mens Eutehtml -egenskapen får innhold med HTML -koder. I denne studien forklarte vi Outerhtml -egenskapen i JavaScript.