Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

InnerHTML i outerHTML DOM svojstva omogućuju čitanje i pisanje sadržaja na web stranici. Možete ih upotrijebiti za dohvaćanje markupa ili unošenje izmjena u njega, a ta dva su na mnogo načina slična. Ali postoji značajna razlika.

Kada radite s DOM-om, innerHTML i outerHTML ćete koristiti sasvim drugačije. Na praktičnim primjerima saznajte kako iskoristiti ova dva svojstva.

Što je unutarnji HTML?

Svojstvo innerHTML dio je DOM a možete mu pristupiti putem JavaScripta. Možete ga koristiti za dobivanje ili postavljanje sadržaja elementa. Ovaj sadržaj isključuje vlastitu oznaku elementa i uključuje samo oznake koje predstavljaju djecu elementa, u obliku niza.

Razmotrite ovaj uzorak koda:

<html>
<tijelo>
<striskaznica="moj p">Ja sam paragraf.str>


<skripta>
dokument.getElementById("moj p").unutarnjiHTML = "Pozdrav svijete";
skripta>
tijelo>


html>

U vašem pregledniku vidjet ćete standardni odlomak sa zamjenskim tekstom, ovako:

instagram viewer

Svojstvo innerHTML odabire i mijenja sadržajelement u ovom primjeru.

Što je vanjski HTML?

OuterHTML svojstvo je kao innerHTML na mnogo načina. Možete ga koristiti za dobivanje ili postavljanje sadržaja odabranog elementa. Međutim, također postavlja oznake koje predstavljaju sam element. To uključuje početnu oznaku, sva svojstva i, gdje je relevantno, završnu oznaku.

Ponovno pogledajte prethodni primjer da vidite kako se vanjski HTML razlikuje:

<html>
<tijelo>
<striskaznica="moj p">Ja sam paragraf.str>


<skripta>
dokument.getElementById("moj p").vanjskiHTML = "
Ovaj H1 zamijenio je odlomak.
"
skripta>
tijelo>
html>

U vašem pregledniku trebali biste vidjeti nešto poput ovoga:

U ovom primjeru, svojstvo outerHTML mijenja str element u an h1 element.

Znajte razliku i kada koristiti ova svojstva

InnerHTML i outerHTML DOM svojstva imaju mnogo sličnosti, ali jednu ključnu razliku. Svojstvo innerHTML bilježi HTML sadržaj elementa. Nasuprot tome, svojstvo outerHTML bilježi HTML koji predstavlja sam element i njegov sadržaj.

Ova svojstva možete koristiti za čitanje i pisanje HTML sadržaja putem DOM-a. DOM će biti uobičajen, važan koncept u vašem procesu razvoja JavaScripta.