Il semble que les développeurs web expérimentés ne voient pas d'un bon œil l'utilisation de la fonction document.write() en JavaScript lors de l'écriture de HTML dynamique.
Pourquoi en est-il ainsi ? correctes de la manière suivante ?
document.write() ne fonctionnera que pendant l'analyse initiale de la page et la création du DOM. Une fois que le navigateur arrive à la fin de la page </body> et que le DOM est prêt, vous ne pouvez pas utiliser la balise document.write() plus.
Je ne dirais pas que l'utilisation de document.write() est correcte ou incorrecte, cela dépend simplement de votre situation. Dans certains cas, il suffit d'avoir document.write() pour accomplir la tâche. Regardez comment Google Analytics est injecté dans la plupart des sites web.
Une fois le DOM prêt, vous avez deux façons d'insérer du HTML dynamique (en supposant que nous allons insérer du nouveau HTML dans <div id="node-id"></div> ) :
Utilisation de innerHTML sur un noeud :
var node = document.getElementById('node-id');
node.innerHTML('<p>some dynamic html</p>');Utiliser les méthodes DOM :
var node = document.getElementById('node-id');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('some dynamic html'));
node.appendChild(newNode);L'utilisation des méthodes de l'API DOM peut être la manière la plus pure de faire les choses, mais innerHTML s'est avéré beaucoup plus rapide et est utilisé sous le capot de bibliothèques JavaScript telles que jQuery.
Nota: Le <script> devra se trouver à l'intérieur de votre <body> pour que cela fonctionne.
Vous pouvez l'utiliser, l'essayer =). Ce n'est probablement pas ce que vous voulez faire, mais vous pouvez quand même le faire.
Une belle réponse complète, merci. Je comprends maintenant que document.write() n'est utile que lorsque la page se charge et est créée pour la première fois. Pour mettre à jour dynamiquement la page par la suite, les méthodes DOM ou innerHTML() sont indispensables.
Pouvez-vous prouver que innerHTML est toujours plus rapide ? Je doute que ce soit toujours le cas. Si vous ajoutez des nœuds un par un à un nœud existant dans le DOM, je pense que innerHTML est plus rapide, puisque le navigateur doit potentiellement manipuler et re-rendre des parties du document à chaque étape, mais si au lieu de cela vous créez un nouvel arbre de nœuds et ajoutez son nœud racine au DOM à la fin, je pense que c'est aussi rapide ou plus rapide que l'utilisation de innerHTML.
document.write() ne fonctionne pas avec le XHTML. Il est exécuté après la page a fini de se charger et ne fait rien d'autre qu'écrire une chaîne de caractères HTML.
Étant donné que la représentation en mémoire de l'HTML est le DOM, la meilleure façon de mettre à jour une page donnée est de manipuler directement le DOM.
Pour ce faire, vous devez créer vos nœuds de manière programmatique, puis les attacher à un endroit existant du DOM. Pour les besoins d'un exemple [artificiel], en supposant que j'ai un fichier div qui maintient un élément ID de "header", je pourrais alors introduire un texte dynamique en procédant de la sorte :
// create my text
var sHeader = document.createTextNode('Hello world!');
// create an element for the text and append it
var spanHeader = document.createElement('span');
spanHeader.appendChild(sHeader);
// grab a reference to the div header
var divHeader = document.getElementById('header');
// append the new element to the header
divHeader.appendChild(spanHeader);
Les méthodes DOM, telles que décrites par Tom.
innerHTML, comme indiqué par iHunger.
Les méthodes DOM sont largement préférables aux chaînes de caractères pour la définition des attributs et du contenu. Si vous vous retrouvez à écrire des innerHTML= '<a href="'+path+'">'+text+'</a>' vous créez en fait de nouvelles failles de sécurité inter-sites côté client, ce qui est un peu triste si vous avez passé du temps à sécuriser votre côté serveur.
Les méthodes DOM sont traditionnellement décrites comme "lentes" par rapport à l'innerHTML. Mais ce n'est pas vraiment le cas. Ce qui est lent, c'est l'insertion d'un grand nombre de nœuds enfants :
for (var i= 0; i<1000; i++)
div.parentNode.insertBefore(document.createElement('div'), div);Cela se traduit par une charge de travail pour le DOM, qui doit trouver le bon endroit dans sa liste de nœuds pour insérer l'élément, déplacer les autres nœuds enfants vers le haut, insérer le nouveau nœud, mettre à jour les pointeurs, et ainsi de suite.
La définition de la valeur d'un attribut existant ou des données d'un nœud de texte, en revanche, est très rapide ; il suffit de modifier un pointeur de chaîne et c'est tout. Cela sera beaucoup plus rapide que de sérialiser le parent avec innerHTML, de le modifier et de l'analyser à nouveau (et ne perdra pas vos données non sérialisables comme les gestionnaires d'événements, les références JS et les valeurs de formulaire).
Il existe des techniques permettant de manipuler le DOM sans avoir recours à la lenteur des childNodes. En particulier, il faut être conscient des possibilités offertes par cloneNode et en utilisant DocumentFragment . Mais parfois, innerHTML est vraiment plus rapide. Vous pouvez toujours obtenir le meilleur des deux mondes en utilisant innerHTML pour écrire votre structure de base avec des espaces réservés pour les valeurs d'attributs et le contenu textuel, que vous remplirez ensuite à l'aide de DOM. Cela vous évite d'avoir à écrire votre propre escapehtml() pour contourner les problèmes d'évasion et de sécurité mentionnés ci-dessus.
Dans ce cas, il serait peut-être judicieux d'utiliser jQuery. Il offre des fonctionnalités pratiques et vous pouvez faire des choses comme celles-ci :
$('div').html('<b>Test</b>');Jetez un coup d'œil à http://docs.jquery.com/Attributes/html#val pour plus d'informations.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
6 votes
JQuery. Je ne l'ai pas ajouté comme réponse réelle, mais je m'en suis approché. It handles dom manipulation properly, while letting you write something simple like this: $("<div><span>text</span><div>sub</div></div>").appendTo('body');
2 votes
Il s'agit d'un cas où le mème jQuery a du sens. "Je vois que vous essayez d'écrire du HTML en utilisant JavaScript. Tu devrais laisser tomber et utiliser jQuery !"
4 votes
JQuery n'est en aucun cas la manière "correcte" de créer du HTML en JavaScript. Il est écrit en JavaScript et utilisera une ou plusieurs des méthodes mentionnées dans les réponses ci-dessous, avec l'inconvénient qu'en tant que bibliothèque à usage général, il ne fera pas les choix de stratégie éclairés pour chaque situation que vous auriez à faire en tant que développeur.
1 votes
@Tim : Cette méthode n'est pas plus "correcte" ou "incorrecte" que n'importe laquelle des méthodes citées, mais c'est une approche parfaitement valable. Il n'existe pas de réponse unique qui soit "correcte" dans toutes les situations. Le "désavantage" que vous évoquez n'est qu'une caractéristique : je peux ou non passer mon temps à analyser des stratégies optimales pour la production de HTML lorsque les avantages potentiels sont marginaux. Selon votre choix, la gestion transparente de cette complexité peut être un avantage ou un inconvénient. On peut décider d'utiliser jQuery jusqu'à ce que le besoin d'une stratégie plus optimale se fasse sentir.
1 votes
@Adam - Bien argumenté. Le terme "désavantage" est toujours exact en termes d'écriture du code le plus efficace, mais je comprends votre point de vue selon lequel le gain d'efficacité ne sera pas toujours assez important pour compenser la commodité de la méthode jQuery, si et seulement si jQuery est déjà utilisé pour une autre tâche non triviale sur la page. Ce n'est certainement pas une tâche pour laquelle il vaut la peine d'utiliser jQuery.