Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Vlastnosti innerHTML a externalHTML DOM vám umožňují číst a zapisovat obsah na webové stránce. Můžete je použít k načtení označení nebo k jeho změnám a oba jsou v mnoha ohledech podobné. Ale je tu podstatný rozdíl.

Při práci s DOM budete používat innerHTML a externalHTML zcela odlišně. Na praktických příkladech zjistíte, jak tyto dvě vlastnosti používat.

Co je vnitřní HTML?

Vlastnost innerHTML je součástí DOM a můžete k němu přistupovat pomocí JavaScriptu. Můžete jej použít k získání nebo nastavení obsahu prvku. Tento obsah vylučuje vlastní značku prvku a zahrnuje pouze označení, které představuje potomky prvku ve formě řetězce.

Zvažte tento příklad kódu:

<html>
<tělo>
<pid="moje p">Jsem paragraf.p>


<skript>
dokument.getElementById("moje p").vnitřníHTML = "Ahoj světe";
skript>
tělo>


html>

Ve vašem prohlížeči uvidíte standardní odstavec s náhradním textem, například:

instagram viewer

Vlastnost innerHTML vybírá a mění obsah souboruprvek v tomto příkladu.

Co je vnější HTML?

Vlastnost externalHTML je v mnoha ohledech podobná innerHTML. Můžete jej použít k získání nebo nastavení obsahu vybraného prvku. Nastaví však také označení představující samotný prvek. To zahrnuje úvodní značku, jakékoli vlastnosti a případně i koncovou značku.

Vraťte se k předchozímu příkladu, abyste viděli, jak se vnější HTML liší:

<html>
<tělo>
<pid="moje p">Jsem paragraf.p>


<skript>
dokument.getElementById("moje p").vnějšíHTML = "
Tento H1 nahradil odstavec.
"
skript>
tělo>
html>

Ve vašem prohlížeči byste měli vidět něco takového:

V tomto příkladu vlastnost externalHTML změní p prvek do an h1 živel.

Poznejte rozdíl a kdy tyto vlastnosti použít

Vlastnosti innerHTML a externalHTML DOM mají mnoho podobností, ale jeden klíčový rozdíl. Vlastnost innerHTML zachycuje obsah HTML prvku. Naproti tomu vlastnost externalHTML zachycuje HTML, které představuje samotný prvek a jeho obsah.

Tyto vlastnosti můžete použít ke čtení a zápisu obsahu HTML prostřednictvím DOM. DOM bude běžným a důležitým konceptem během vašeho procesu vývoje JavaScriptu.