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 = "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" /n/t"http://www.w3.org/TR/html4/loose.dtd">/n<html>/n<head>/n/t<title>Greetings!</title>/n</head>/n<body>/n/t<p>Howdy!</p>/n</body>/n</html>";
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).
Utilice este código (después de que se haya cargado el documento actual):
document.open("text/html", "replace");
document.write(htmlCode); // htmlCode is the variable you called newDocument
document.close();
Ejemplo en vivo aquí: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open
espero que esto ayude ;)
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.