¿Cuándo se debe usar .innerHTML y cuando document.write en JavaScript

Question

¿Existe una regla general, cuando se debe usar document.write para cambiar el contenido del sitio web y cuándo usar .innerHTML?

Hasta ahora mis reglas eran:

1) el uso document.write cuando añadiendo nuevo contenido

2) Utilizar .innerHTML cuando cambiar contenido existente

Pero se confundió, ya que alguien dijo que por un lado .innerHTML es un extraño estándar de Microsoft, pero por otro lado leo que document.write no está permitido en XHTML.

¿Qué estructuras debo usar para manipular mi código fuente con JavaScript?

Answer 1

innerHTML se puede utilizar para cambiar el contenido del DOM por munging de cadena. Así que si usted quiere añadir un párrafo con un poco de texto al final de un elemento seleccionado se podía así que algo como

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

Aunque me gustaría sugerir el uso de mayor cantidad de API específica manipulación del DOM como sea posible (por ejemplo document.createElement, document.createDocumentFragment, <element>.appendChild, etc.). Pero esa es solo mi preferencia.

La única vez que he visto el uso aplicable de document.write está en el HTML5 Boilerplate (mire cómo comprueba si jQuery se cargó correctamente). Aparte de eso, me mantendría alejado de eso.

Answer 2

innerHTML y document.write no son realmente métodos comparables para cambiar/insertar dinámicamente el contenido, ya que su uso es diferente y para diferentes propósitos.

document.write debe estar vinculado a casos de uso específicos. Cuando se ha cargado una página y se ha producido DOM ready, ya no puede usar ese método. Es por eso que generalmente se usa más en declaraciones condicionales en las que puede usarlo para cargar sincrónicamente un archivo javascript externo (bibliotecas javascript), incluidos los bloques <script> (por ejemplo, cuando carga jQuery desde el CDN en HTML5 Boilerplate).

Lo que se lee acerca de este método y XHTML es válido cuando la página se sirve junto con el tipo MIME application/xhtml+xml: De w3.org

document.write (como document.writeln) no funciona en documentos XHTML (obtendrá un error "La operación no es compatible" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) en la consola de error). Este es el caso si se abre un archivo local con una extensión de archivo .xhtml o para cualquier documento sirve con una aplicación/xhtml + xml tipo MIME

Otra diferencia entre estos enfoques se relaciona en nodo de inserción: cuando use el método .innerHTML, puede elegir dónde agregar el contenido, mientras que al usar document.write, el nodo de inserción siempre es la parte del documento en la que se utilizó este método.