web-dev-qa-db-fra.com

javascript document.innerHTML définit le contenu de tout le document

Comment puis-je définir le innerHTML, ou tout le contenu d'un document HTML en utilisant javascript?

Par exemple, mon document ressemblerait à ceci:

<!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>

Mais le navigateur chargerait le code HTML suivant:

<!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>
javascripthtmldominnerhtml
28
Web_Designer

Si vous ne souhaitez pas utiliser innerHTML, vous pouvez utiliser document.write(newDocument);.

Si le document n'est pas complètement chargé, vous devrez également mettre document.open() (merci bažmegakapa).

26
wchargin

document.innerHTML est nouveau dans HTML5 et n'est pas pris en charge dans tous les navigateurs.

document.documentElement fait référence à l'élément racine de votre document, qui dans ce cas est le <html> élément.

Vous pouvez donc définir document.documentElement.innerHTML. Notez que puisque le DOCTYPE ne fait pas partie de cela, il n'est donc pas nécessaire de l'inclure dans le innerHTML.

Exemple (essayez d'exécuter ceci dans la console JS de votre navigateur):

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

Mise à jour: document.innerHTML est passé de la spécification HTML à la spécification d'analyse et de sérialisation DOM , puis a été supprimé. L'alternative suggérée consiste à utiliser DOMParser :

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

Malheureusement, au moment de la rédaction de ce document, la plupart des navigateurs ne le prennent pas encore en charge pour HTML.

27
Mathias Bynens

Utilisez ce code (après le chargement du document actuel):

document.open("text/html", "replace");
document.write(htmlCode);  // htmlCode is the variable you called newDocument
document.close();

Exemple en direct ici: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open

j'espère que cette aide;)

11
fred727

Facile:

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

Notez qu'il n'interprétera pas le code js intégré dans votre code html.

3
Matthieu Charbonnier