Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

InnerHTML- ja outerHTML DOM -ominaisuuksien avulla voit lukea ja kirjoittaa verkkosivun sisältöä. Voit käyttää niitä merkintöjen hakemiseen tai muutosten tekemiseen, ja nämä kaksi ovat samanlaisia ​​monella tapaa. Mutta siinä on merkittävä ero.

Kun työskentelet DOM: n kanssa, käytät innerHTML- ja outerHTML-koodia aivan eri tavalla. Ota selvää näiden kahden ominaisuuden käyttämisestä käytännön esimerkkien avulla.

Mikä on sisäinen HTML?

InnerHTML-ominaisuus on osa DOM ja pääset siihen JavaScriptin kautta. Voit käyttää sitä elementin sisällön hakemiseen tai asettamiseen. Tämä sisältö ei sisällä elementin omaa tunnistetta ja sisältää vain merkinnän, joka edustaa elementin lapsia merkkijonon muodossa.

Harkitse tätä koodiesimerkkiä:

<html>
<kehon>
<sid="minun p">Olen kappale.s>


<käsikirjoitus>
asiakirja.getElementById("minun p").innerHTML = "Hei maailma";
käsikirjoitus>
kehon>


html>

Näet selaimessasi vakiokappaleen, jossa on korvaava teksti, kuten:

InnerHTML-ominaisuus valitsee ja muuttaa sisällönelementti tässä esimerkissä.

Mikä on ulkoinen HTML?

OuterHTML-ominaisuus on monella tapaa kuin innerHTML. Voit käyttää sitä valitun elementin sisällön hakemiseen tai asettamiseen. Se kuitenkin asettaa myös itse elementtiä edustavan merkinnän. Tämä sisältää aloitustunnisteen, mahdolliset ominaisuudet ja tarvittaessa sulkevan tagin.

Tutustu edelliseen esimerkkiin nähdäksesi, miten ulkoinen HTML eroaa:

<html>
<kehon>
<sid="minun p">Olen kappale.s>


<käsikirjoitus>
asiakirja.getElementById("minun p").outerHTML = "
Tämä H1 korvasi kohdan.
"
käsikirjoitus>
kehon>
html>

Sinun pitäisi nähdä selaimessasi jotain tällaista:

Tässä esimerkissä outerHTML-ominaisuus muuttaa s elementti an h1 elementti.

Tiedä ero ja milloin näitä ominaisuuksia tulee käyttää

InnerHTML- ja outerHTML DOM -ominaisuuksilla on monia yhtäläisyyksiä, mutta yksi keskeinen ero. InnerHTML-ominaisuus kaappaa elementin HTML-sisällön. Sitä vastoin outerHTML-ominaisuus kaappaa HTML: n, joka edustaa itse elementtiä ja sen sisältöä.

Voit käyttää näitä ominaisuuksia HTML-sisällön lukemiseen ja kirjoittamiseen DOM: n kautta. DOM on yleinen, tärkeä käsite koko JavaScript-kehitysprosessissasi.