Quando si dovrebbe usare .innerHTML e quando document.write in JavaScript

Question

Esiste una regola generale, quando si dovrebbe usare document.write per modificare il contenuto del sito Web e quando utilizzare .innerHTML?

finora la mia regole erano:

1) Utilizzare document.write quando aggiungendo nuovi contenuti

2) Utilizzare .innerHTML quando cambia esistente contenuto

Ma io sono confuso, dato che qualcuno ha detto me che da un lato lo .innerHTML è uno strano standard Microsoft, ma d'altro canto ho letto che document.write non è consentito in XHTML.

Quali strutture dovrei usare per manipolare il mio codice sorgente con JavaScript?

Answer 1

innerHTML può essere utilizzato per modificare il contenuto del DOM tramite stringa munging. Quindi, se si vuole aggiungere un paragrafo con un testo alla fine di un elemento selezionato si potrebbe così qualcosa come

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

Anche se io suggerirei di utilizzare il più API specifica manipolazione del DOM come possibile (ad esempio document.createElement, document.createDocumentFragment, <element>.appendChild, ecc.). Ma questa è solo la mia preferenza.

L'unica volta che ho visto l'uso applicabile di document.write è nel HTML5 Boilerplate (guarda come controlla se jQuery è stato caricato correttamente). Oltre a questo, vorrei starne lontano.

Answer 2

innerHTML e document.write non sono metodi realmente confrontabili per modificare/inserire dinamicamente il contenuto, poiché il loro utilizzo è diverso e per scopi diversi.

document.write deve essere associato a casi d'uso specifici. Quando una pagina è stata caricata e si è verificato DOM ready, non è più possibile utilizzare questo metodo. Questo è il motivo per cui è generalmente più utilizzato nelle istruzioni condizionali in cui è possibile utilizzarlo per caricare in modo sincrono file javascript esterni (librerie javascript), compresi i blocchi <script> (ad esempio quando si carica jQuery dal CDN in HTML5 Boilerplate).

Cosa si legge su questo metodo e XHTML è vero quando la pagina viene servito insieme con il tipo application/xhtml+xml MIME: Da w3.org

document.write (come document.writeln) non funziona in documenti XHTML (riceverai un errore "Operazione non supportata" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) sulla console degli errori). Questo è il caso se l'apertura di un file locale con estensione .xhtml o per qualsiasi documento, servito con un application/xhtml + xml tipo MIME

Un'altra differenza tra questi approcci è legato a nodo inserimento: quando si utilizzare il metodo .innerHTML è possibile scegliere dove aggiungere il contenuto, mentre utilizzando document.write il nodo di inserimento è sempre la parte del documento in cui è stato utilizzato questo metodo.