Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Az innerHTML és az outerHTML DOM tulajdonságok lehetővé teszik a tartalom olvasását és írását egy weboldalon. Használhatja őket jelölések lekérésére vagy módosítására, és a kettő sok tekintetben hasonló. De van egy jelentős különbség.

Amikor a DOM-mal dolgozik, az innerHTML-t és az outerHTML-t egészen másképp fogja használni. Gyakorlati példákon keresztül megtudhatja, hogyan használhatja ezt a két tulajdonságot.

Mi az a belső HTML?

Az innerHTML tulajdonság része a DOM és JavaScripten keresztül érheti el. Használhatja egy elem tartalmának lekérésére vagy beállítására. Ez a tartalom nem tartalmazza az elem saját címkéjét, és csak azt a jelölést tartalmazza, amely az elem gyermekeit jelképezi karakterlánc formájában.

Tekintsük ezt a kódmintát:

<html>
<test>
<pid="myP">Én egy bekezdés vagyok.p>


<forgatókönyv>
dokumentum.getElementById("myP").innerHTML = "Helló Világ";
forgatókönyv>
test>


html>
instagram viewer

A böngészőben egy szabványos bekezdés jelenik meg a helyettesítő szöveggel, például:

Az innerHTML tulajdonság kiválasztja és módosítja a tartalmátelem ebben a példában.

Mi az a külső HTML?

Az outerHTML tulajdonság sok tekintetben olyan, mint az innerHTML. Segítségével lekérheti vagy beállíthatja a kiválasztott elem tartalmát. Ugyanakkor magát az elemet reprezentáló jelölést is beállítja. Ez magában foglalja a nyitó címkét, az esetleges tulajdonságokat és – ahol releváns – a záró címkét.

Tekintse meg újra az előző példát, hogy megtudja, miben különbözik a külső HTML:

<html>
<test>
<pid="myP">Én egy bekezdés vagyok.p>


<forgatókönyv>
dokumentum.getElementById("myP").outerHTML = "
Ez a H1 bekezdést váltott fel.
"
forgatókönyv>
test>
html>

A böngészőben valami ilyesmit kell látnia:

Ebben a példában az outerHTML tulajdonság megváltoztatja a p elem egy h1 elem.

Ismerje meg, mi a különbség, és mikor kell használni ezeket a tulajdonságokat

Az innerHTML és az outerHTML DOM tulajdonságainak sok hasonlósága van, de egy lényeges különbség van. Az innerHTML tulajdonság egy elem HTML-tartalmát rögzíti. Ezzel szemben az outerHTML tulajdonság azt a HTML-kódot rögzíti, amely magát az elemet és annak tartalmát reprezentálja.

Ezekkel a tulajdonságokkal olvashat és írhat HTML tartalmat a DOM-on keresztül. A DOM gyakori, fontos fogalom lesz a JavaScript fejlesztési folyamat során.