obtener ejemplos ejemplo div contenido javascript html dom innerhtml

ejemplos - javascript document.innerHTML establece el contenido de todo el documento



innerhtml jquery ejemplos (4)

¿Cómo puedo configurar el innerHTML , o todo el contenido de un documento HTML usando javascript?

Por ejemplo, mi documento se vería así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-language" content="en"/> <title>Webpage Generator</title> <script type="text/javascript"> var newDocument = "&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; /n/t&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;/n&lt;html&gt;/n&lt;head&gt;/n/t&lt;title&gt;Greetings!&lt;/title&gt;/n&lt;/head&gt;/n&lt;body&gt;/n/t&lt;p&gt;Howdy!&lt;/p&gt;/n&lt;/body&gt;/n&lt;/html&gt;"; document.innerHTML = newDocument; </script> </head> <body> </body> </html>

Pero el navegador cargaría el siguiente HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Greetings!</title> </head> <body> <p>Howdy!</p> </body> </html>


Sencillo:

document.body.parentElement.innerHTML = ''<html><body><div>Your code</div></body></html>'';

Tenga en cuenta que no interpretará el código js incrustado en su código html.


Si no desea utilizar innerHTML, puede usar document.write(newDocument); .

Si el documento no se ha cargado completamente, también deberá colocar document.open() (gracias bažmegakapa).



document.innerHTML es nuevo en HTML5 y no es compatible con todos los navegadores.

document.documentElement refiere al elemento raíz de su documento, que en este caso es el elemento <html> .

Por lo tanto, podría establecer document.documentElement.innerHTML . Tenga en cuenta que dado que el DOCTYPE queda fuera de eso, no es necesario incluirlo en el innerHTML .

Ejemplo (intente ejecutar esto en la consola JS de su navegador):

document.documentElement.innerHTML = ''<title>Test</title><p>LOLWAT'';

Actualización: document.innerHTML trasladó de la especificación HTML a la especificación de análisis y serialización de DOM , y luego se eliminó. La alternativa sugerida es usar DOMParser :

var doc = (new DOMParser).parseFromString(''<!doctype html><title>wat</title>'', ''text/html'');

Desafortunadamente, en el momento de escribir este artículo, la mayoría de los navegadores aún no lo admiten para HTML.