logo

Kdy je vhodné použít .innerHTML a kdy document.write v JavaScriptu

innerHTML a document.write nejsou ve skutečnosti srovnatelné metody pro dynamickou změnu/vkládání obsahu, protože jejich použití je různé a pro různé účely.

document.write by měly být vázány na konkrétní případy použití. Když se stránka načte a DOM je připraven tuto metodu již nemůžete použít. To je důvod, proč se obecně nejvíce používá v podmíněných příkazech, ve kterých jej můžete použít k synchronnímu načtení externího souboru javascriptu (knihoven javascriptu), včetně <script> bloků (např. když načtete jQuery z CDN v HTML5 Boilerplate ).

To, co se dočtete o této metodě a XHTML, platí, když je stránka zobrazována společně s application/xhtml+xml typ mime:Z w3.org

document.write (jako document.writeln) nefunguje v dokumentech XHTML (na chybové konzoli se zobrazí chyba „Operace není podporována“ (NS_ERROR_DOM_NOT_SUPPORTED_ERR). To je případ, kdy otevíráte místní soubor s příponou .xhtml nebo pro jakýkoli dokument poskytovaný s typem MIME application/xhtml+xml

Další rozdíl mezi těmito přístupy souvisí s uzlem vložení :když použijete .innerHTML můžete si vybrat, kam chcete obsah připojit, při použití document.write je vkládací uzel vždy částí dokumentu, ve které byla tato metoda použita.


innerHTML lze použít ke změně obsahu DOM pomocí mungování řetězce. Takže pokud byste chtěli přidat odstavec s nějakým textem na konec vybraného prvku, můžete něco jako

document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'

I když bych navrhoval používat co nejvíce rozhraní API specifického pro manipulaci s DOM (např. document.createElement , document.createDocumentFragment , <element>.appendChild , atd.). Ale to je jen moje preference.

Jediný případ, kdy jsem viděl použitelné použití document.write je v HTML5 Boilerplate (podívejte se, jak kontroluje, zda byl jQuery načten správně). Jinak bych se od toho držel dál.


1) document.write() vloží obsah přímo do prohlížeče, kde jej uživatel uvidí.

tato metoda zapíše do dokumentu výrazy HTML nebo kód JavaScript.

Níže uvedený příklad pouze vytiskne „Hello World“ do dokumentu

<html>
  <body>
    <script>
    document.write("Hello World!");
    </script>
  </body>
</html>

2) document.innerHTML změní vnitřní obsah prvku

Změní stávající obsah prvku

Níže uvedený kód změní obsah značky p

<html>
<body>
<p id="test" onclick="myFun()">Click me to change my HTML content or my inner HTML</p>
<script>
function myFun() {
  document.getElementById("test").innerHTML = "I'm replaced by exiesting element";
}
</script>
</body>
</html>

můžete použít document.write() bez připojeného HTML, ale pokud již máte HTML, který chcete změnit, pak document.innerHTML by byla jasná volba.