Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Lastnosti DOM innerHTML in outerHTML vam omogočajo branje in pisanje vsebine na spletni strani. Uporabite jih lahko za pridobivanje oznak ali spreminjanje oznak, in oba sta si v marsičem podobna. Je pa bistvena razlika.

Pri delu z DOM boste uporabljali innerHTML in outerHTML povsem drugače. Ugotovite, kako uporabiti ti dve lastnosti s praktičnimi primeri.

Kaj je notranji HTML?

Lastnost innerHTML je del DOM in do njega lahko dostopate prek JavaScripta. Uporabite ga lahko za pridobitev ali nastavitev vsebine elementa. Ta vsebina izključuje lastno oznako elementa in vključuje samo oznako, ki predstavlja podrejene elemente elementa v obliki niza.

Razmislite o tem vzorcu kode:

<html>
<telo>
<strid="moj P">Jaz sem odstavek.str>


<scenarij>
dokument.getElementById("moj P").notranjiHTML = "Pozdravljen, svet";
scenarij>
telo>


html>

V brskalniku boste videli standardni odstavek z nadomestnim besedilom, takole:

instagram viewer

Lastnost innerHTML izbere in spremeni vsebinoelement v tem primeru.

Kaj je zunanji HTML?

Lastnost outerHTML je v mnogih pogledih podobna innerHTML. Z njim lahko pridobite ali nastavite vsebino izbranega elementa. Vendar pa nastavi tudi oznako, ki predstavlja sam element. To vključuje začetno oznako, morebitne lastnosti in, kjer je ustrezno, končno oznako.

Ponovno si oglejte prejšnji primer, da vidite, kako se zunanji HTML razlikuje:

<html>
<telo>
<strid="moj P">Jaz sem odstavek.str>


<scenarij>
dokument.getElementById("moj P").zunanjiHTML = "
Ta H1 je nadomestil odstavek.
"
scenarij>
telo>
html>

V brskalniku bi morali videti nekaj takega:

V tem primeru lastnost outerHTML spremeni str element v an h1 element.

Spoznajte razliko in kdaj uporabiti te lastnosti

Lastnosti DOM innerHTML in outerHTML imata veliko podobnosti, a eno ključno razliko. Lastnost innerHTML zajame vsebino HTML elementa. Nasprotno pa lastnost outerHTML zajame HTML, ki predstavlja sam element in njegovo vsebino.

Te lastnosti lahko uporabite za branje in pisanje vsebine HTML prek DOM. DOM bo pogost in pomemben koncept v celotnem procesu razvoja JavaScripta.