innerHTML und document.write sind keine wirklich vergleichbaren Methoden zum dynamischen Ändern/Einfügen von Inhalten, da ihre Verwendung unterschiedlich und für unterschiedliche Zwecke ist.
document.write sollten an bestimmte Anwendungsfälle gebunden sein. Wenn eine Seite geladen wurde und das DOM bereit ist Sie können diese Methode nicht mehr verwenden. Aus diesem Grund wird es im Allgemeinen am häufigsten in bedingten Anweisungen verwendet, in denen Sie externe Javascript-Dateien (Javascript-Bibliotheken) synchron laden können, einschließlich <script> Blöcke (z.B. beim Laden von jQuery aus dem CDN in HTML5 Boilerplate ).
Was Sie über diese Methode und XHTML lesen, gilt, wenn die Seite zusammen mit dem application/xhtml+xml bereitgestellt wird Mime-Typ:Von w3.org
document.write (wie document.writeln) funktioniert nicht in XHTML-Dokumenten (Sie erhalten den Fehler „Operation wird nicht unterstützt“ (NS_ERROR_DOM_NOT_SUPPORTED_ERR) auf der Fehlerkonsole). Dies ist der Fall, wenn eine lokale Datei mit einer .xhtml-Dateierweiterung geöffnet wird oder für jedes Dokument, das mit einem application/xhtml+xml-MIME-Typ bereitgestellt wird
Ein weiterer Unterschied zwischen diesen Ansätzen betrifft den Einfügungsknoten :wenn Sie .innerHTML verwenden Methode können Sie wählen, wo der Inhalt angehängt werden soll, während bei Verwendung von document.write der Einfügungsknoten immer der Teil des Dokuments ist, in dem diese Methode verwendet wurde.
innerHTML kann verwendet werden, um den Inhalt des DOM durch String-Munging zu ändern. Wenn Sie also am Ende eines ausgewählten Elements einen Absatz mit etwas Text hinzufügen möchten, können Sie so etwas wie
document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'
Obwohl ich vorschlagen würde, so viel DOM-Manipulations-spezifische API wie möglich zu verwenden (z. B. document.createElement , document.createDocumentFragment , <element>.appendChild , etc.). Aber das ist nur meine Präferenz.
Das einzige Mal, dass ich eine zutreffende Verwendung von document.write gesehen habe befindet sich im HTML5-Boilerplate (sehen Sie sich an, wie es prüft, ob jQuery ordnungsgemäß geladen wurde). Davon abgesehen würde ich die Finger davon lassen.
1) document.write() bringt den Inhalt direkt in den Browser, wo der Benutzer ihn sehen kann.
Diese Methode schreibt HTML-Ausdrücke oder JavaScript-Code in ein Dokument.
Das folgende Beispiel druckt einfach „Hello World“ in das Dokument
<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
2) document.innerHTML ändert den inneren Inhalt eines Elements
Es ändert den bestehenden Inhalt eines Elements
Der folgende Code ändert den Inhalt des p-Tags
<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>
Sie könnten document.write() ohne verbundenes HTML verwenden, aber wenn Sie bereits HTML haben, das Sie ändern möchten, wäre document.innerHTML die offensichtliche Wahl.