Quelle est la bonne façon d'écrire du HTML en utilisant Javascript?



Answers

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

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?




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]).




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.




Utilisez jquery, regardez comme c'est facile:

    var a = '<h1> this is some html </h1>';
    $("#results").html(a);

       //html
    <div id="results"> </div>



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 .




Peut-être une bonne idée est d'utiliser jQuery dans ce cas. Il fournit une fonctionnalité pratique et vous pouvez faire des choses comme ceci:

$('div').html('<b>Test</b>');

Jetez un oeil à http://docs.jquery.com/Attributes/html#val pour plus d'informations.




Links