dynamic récupérer - Quelle est la bonne façon d'écrire du HTML en utilisant Javascript?





ajouter innerhtml (11)


Sûrement le meilleur moyen est d'éviter de faire une lourde création HTML dans votre JavaScript? Le balisage envoyé par le serveur doit en contenir la majeure partie, que vous pouvez ensuite manipuler, en utilisant CSS plutôt que de supprimer / remplacer des éléments brutaux, si cela est possible.

Cela ne s'applique pas si vous faites quelque chose de "malin" comme émuler un système de widget.

Je vois dans certains articles que les gens désapprouvent l'utilisation de document.write() en javascript lors de l'écriture HTML dynamique.

Pourquoi est-ce? et quelle est la bonne façon?




Vous pouvez modifier innerHTML ou outerHTML d'un élément sur la page à la place.




element.InnerHtml= allmycontent : element.InnerHtml= allmycontent tout dans l'élément. Vous devez utiliser une variable let allmycontent="this is what I want to print inside this element" pour stocker tout le contenu que vous voulez dans cet élément. Si ce n'est pas à chaque fois que vous appelez cette fonction, le contenu de votre élément sera effacé et remplacé par le dernier appel que vous avez fait.

document.write() : peut être utilisé plusieurs fois, chaque fois que le contenu sera imprimé là où l'appel est fait sur la page.

Mais attention: la méthode document.write () n'est utile que pour insérer du contenu lors de la création de la page. Alors utilisez-le pour ne pas répéter lorsque vous avez beaucoup de données à écrire comme un catalogue de produits ou d'images.

Voici un exemple simple: tous vos li pour votre menu de côté sont stockés dans un tableau "tab", vous pouvez créer un script js avec la balise script directement dans la page html et ensuite utiliser la méthode write dans une fonction itérative où vous voulez insérez les li sur la page.

<script type="text/javascript">
document.write("<ul>");
for (var i=0; i<=tab.length; i++){
    document.write(tab[i]);
    }document.write("</ul>");
</script>`

Cela fonctionne parce que Js est interprété de manière linéaire pendant le chargement. Assurez-vous donc que votre script est au bon endroit dans votre page html. Vous pouvez également utiliser un fichier Js externe, mais là encore, vous devez le déclarer à l'endroit où vous voulez qu'il soit interprété.

Pour cette raison, document.write ne peut pas être appelé pour écrire quelque chose sur votre page suite à une "interaction utilisateur" (comme cliquer ou survoler), car alors le DOM a été créé et la méthode write écrira, comme dit ci-dessus nouvelle page (purger la pile d'exécution réelle et lancer une nouvelle pile et une nouvelle arborescence DOM). Dans ce cas, utilisez:

element.innerHTML=("Myfullcontent");

Pour en savoir plus sur les méthodes du document: ouvrez votre console: document; puis ouvrez: __proto__: HTMLDocumentPrototype

Vous verrez la propriété de fonction "write" dans l'objet document. Vous pouvez également utiliser document.writeln qui ajoute une nouvelle ligne à chaque déclaration. Pour en savoir plus sur une fonction / méthode, il suffit d'écrire son nom dans la console sans parenthèse: document.write; La console renverra une description au lieu de l'appeler.




Je ne suis pas particulièrement bon avec JavaScript ou ses meilleures pratiques, mais document.write() avec innerHtml() vous permet essentiellement d'écrire des chaînes qui peuvent être ou non des HTML valides; ce sont juste des caractères. En utilisant le DOM, vous garantissez un code HTML conforme aux normes, qui empêchera votre page de se rompre via un code HTML clairement incorrect.

Et, comme Tom l'a mentionné, JavaScript est fait après le chargement de la page; il serait probablement préférable d'avoir la configuration initiale pour votre page à faire via HTML standard (via des fichiers .html ou tout ce que votre serveur fait [c'est-à-dire php]).




La méthode document.write est très limitée. Vous ne pouvez l'utiliser que lorsque la page est chargée. Vous ne pouvez pas l'utiliser pour mettre à jour le contenu d'une page chargée.

Ce que vous voulez probablement, c'est innerHTML .




Je pense que vous devriez utiliser, au lieu de document.write , l'API JavaScript DOM comme document.createElement , .createTextNode , .appendChild et similaire. Coffre-fort et presque traverser le navigateur.

outerHTML share n'est pas un navigateur croisé, c'est IE seulement.




document.write() ne fonctionne pas avec XHTML. Il est exécuté après le chargement de la page et ne fait rien de plus que d'écrire une chaîne de HTML.

Puisque la représentation réelle en mémoire de HTML est le DOM, la meilleure façon de mettre à jour une page donnée est de manipuler directement le DOM.

La façon dont vous vous y prendrez serait de créer par programme vos nœuds et de les attacher à un emplacement existant dans le DOM. Pour l'exemple de [fins d'un artificiel], en supposant que j'ai un élément div conservant un attribut ID de "header", alors je pourrais introduire du texte dynamique en faisant ceci:

// 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);



document.write() fonctionnera uniquement pendant l'analyse initiale de la page et la création du DOM. Une fois que le navigateur arrive à la </body> fermeture </body> et que le DOM est prêt, vous ne pouvez plus utiliser document.write() .

Je ne dirais pas que l'utilisation de document.write() est correcte ou incorrecte, cela dépend de votre situation. Dans certains cas, vous avez juste besoin de document.write() pour accomplir la tâche. Regardez comment Google Analytics est injecté dans la plupart des sites Web.

Après le DOM, 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> ):

  1. En utilisant innerHTML sur un noeud:

    var node = document.getElementById('node-id');
    node.innerHTML('<p>some dynamic html</p>');
    
  2. Utilisation des 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 façon la plus simple de faire les choses, mais innerHTML s'est avéré beaucoup plus rapide et est utilisé sous le capot dans les bibliothèques JavaScript telles que jQuery.

Note: Le <script> devra être dans votre <body> pour que cela fonctionne.




  1. Méthodes DOM, comme indiqué par Tom.

  2. innerHTML, comme mentionné par iHunger.

Les méthodes DOM sont hautement préférables aux chaînes pour définir les attributs et le contenu. Si vous vous innerHTML= '<a href="'+path+'">'+text+'</a>' écrire innerHTML= '<a href="'+path+'">'+text+'</a>' vous créez en fait de nouveaux trous de sécurité pour les scripts inter-sites du côté client, ce qui est un peu triste si vous avez passé du temps à sécuriser votre serveur.

Les méthodes DOM sont traditionnellement décrites comme «lentes» par rapport à innerHTML. Mais ce n'est pas vraiment toute l'histoire. Ce qui est lent, c'est d'insérer beaucoup 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 que le DOM trouve le bon emplacement dans sa nodelist pour insérer l'élément, déplacer les autres nœuds enfants, insérer le nouveau nœud, mettre à jour les pointeurs, etc.

Définir la valeur d'un attribut existant, ou les données d'un nœud de texte, d'un autre côté, est très rapide; vous venez de changer un pointeur de chaîne et c'est tout. Cela va être beaucoup plus rapide que de sérialiser le parent avec innerHTML, de le changer et de l'analyser de 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 y a des techniques pour faire des manipulations de DOM sans tant de childNodes lentes à marcher. En particulier, soyez conscient des possibilités de 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'attribut et le contenu du texte, que vous remplissez ensuite en utilisant DOM. Cela vous évite d'avoir à écrire votre propre fonction escapehtml() pour contourner les problèmes d'échappement / sécurité mentionnés ci-dessus.




Il y a plusieurs façons d'écrire html avec JavaScript.

document.write n'est utile que si vous voulez écrire sur une page avant qu'elle ne soit réellement chargée. Si vous utilisez document.write () après le chargement de la page (lors d'un événement onload), une nouvelle page sera créée et l'ancien contenu sera remplacé. En outre, cela ne fonctionne pas avec XML, qui inclut XHTML.

D'un autre côté, d'autres méthodes ne peuvent pas être utilisées avant que DOM ait été créé (page chargée), car elles fonctionnent directement avec DOM.

Ces méthodes sont:

  • node.innerHTML = "Peu importe";
  • document.createElement ('div'); et node.appendChild (), etc.

Dans la plupart des cas, node.innerHTML est meilleur car il est plus rapide que les fonctions DOM. La plupart du temps, cela rend le code plus lisible et plus petit.




Lodash a une belle lodash.com/docs#cloneDeep :

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false




javascript html dynamic