Construction HTML (~= DOM) à l'aide de jQuery

J'ai peut-être fait quelque chose de mal, mais je n'ai pas été en mesure de trouver une bonne façon de construire de base HTML/DOM structures, comme des listes, de manière dynamique. Exemple Simple serait de construire un tableau (élément de tableau, d'une ligne de cellules, avec des échappées de contenu de texte) donnée d'entrée comme json (objets).

Le problème que j'ai, c'est que la plupart des appels (comme ".append()", ".html()", ".text()") ne semblent pas à la chaîne de l'intuition (pour moi, de toute façon) façon. Par exemple, vous ne peut pas faire quelque chose comme:

$("#divId").append("<table>").append("<tr>").append("<td>").text("some text");

texte() appel semble effacer le contenu au niveau principal; et ajoute également ajouter des trucs dans le même champ d'application. Je m'attends à ce appennd() pour renvoyer le contenu ajouté, mais il semble être de retour à son propre contexte.

Je sais qu'il est simple "appendText()" extension de l'aide avec la dernière partie. Mais et les autres?

Pour ce que ça vaut, je retourne à DOM, quelque chose comme

$("#divId")[0].appendChild(document.createElement("table"))....

mais c'est assez verbeux.

Donc j'espère que je suis absent quelque chose de tout à fait évident... mais quoi? Appel autre que append()?

J'ai essayé de navigation jQuery référence docs, googler, mais la plupart des docs suffit d'utiliser "intégrer tous les trucs dans une chaîne de caractères"; qui a des problèmes, y compris celui de ne pas citer le contenu textuel correctement.

(aussi: non, ce n'est pas une dup de "JQuery: Construire le code HTML dans la "mémoire" plutôt que DOM"

InformationsquelleAutor StaxMan | 2009-04-30
  1. 14

    Vous pouvez faire ceci:

    $("#divId").append("<table>").append("<tr>").append("<b>").text("some text");

    comme:

    $("#divId").append("<table><tr><td><b>some test</b></td></tr></table>");

    ou

    $("<b></b>").text("some text").appendTo("<td></td>").appendTo("<tr></tr>").appendTo("<table></table>").appendTo("#divId");
    • Ci travaille -- ancien a le problème du texte ayant potentiellement esperluette et moins-thans. Deuxième sonne comme il le ferait l'affaire. Je suppose que je n'ai pas lu les docs pour appendTo() assez bien, en quelque sorte, j'ai pensé qu'il ne serait pas travailler de cette façon. Est tout à fait de sens que si elle le fait, compte tenu de votre échantillon. 🙂
    • sur votre troisième exemple, vous pouvez aller de l'événement plus courts et n' $('< /b>').texte('texte en gras');
    • Hmmh. En fait... parce que de renversement d'ordre (dont j'ai raté la première), on arrive peu délicat, lorsque les entrées de la liste sont ajoutés dans la boucle. Mais il devrait être possible encore.
    • Plus tard, des versions de jQuery mettre en cache les résultats. Ceci est important dans le cas de la fabrication des listes dynamiques. $("<li>"+i+"</li>") va analyser et de créer un nouveau dom chaque boucle (Mauvais rendement) $("<li/>").test(i) cache le li l'objet et de modifier le texte de chaque boucle. Rapide mais encore une fois pas dynamique comme il changer le texte sur l'original en cache li. si votre dans une boucle for par exemple, vous aurez besoin de faire un clone(): $("<li/>").clone().text(i)
    • Cette dernière solution ne fonctionne pas, le second est dangereux en cas "some text" est stocké dans une variable. C'est la première mauvaise solution que j'ai trouver sur LE!
    • Le premier exemple qui tue toute la table avec "some text", il fait exactement la même chose, ce que l'auteur de la question considère comme contraire à l'intuition ("text() appel semble effacer le contenu au niveau principal; et ajoute également ajouter des trucs dans le même champ d'application."). Et parce que mon montage a été rejeté, je suis l'affichage correct (à mon humble avis) version: $("#divId").append($("<table>").append($("<tr>").text("some text"))) - cette version a été publiée également dans ce thread ci-dessous;

    InformationsquelleAutor cletus
  2. 7

    Vous pouvez utiliser append:

    $("#divId").append(
  $("<table/>").append(
    $("<tr/>").append(
      $("<td/>").append(
        $("<b/>").text("some text")
))));

    Si vraiment vous insistez, vous pouvez utiliser appendTo, mais c'est moins intuitif, sera plus lente et prend un peu plus de frappes:

    $("<b/>").text("some text").appendTo(
  $("<td/>").appendTo(
    $("<tr/>").appendTo(
      $("<table/>").appendTo(
        "#divId"
))));

    Dans tous les cas, il est important d'utiliser .text("...") à échapper les caractères spéciaux (et éviter les attaques XSS).

    Encore mieux, quand vous vous ennuyez avec les écrit ces, vous voulez vraiment regarder dans jsrender, moustache, guidon, doT ou tout autre des nombreux javascript templating des solutions. Il vous permet de garder votre code distinct de votre code HTML (pensez MVC) et le rend beaucoup plus claire de ce que vous construisez. Il est beaucoup plus facile à modifier trop.

    • Je suis entièrement d'accord avec cette réponse. Accepté de répondre a des questions - par exemple, tous les exemple produit différent de résultat, qui je crois n'a pas été voulu par l'auteur. Ici sont corrects, les résultats et le code de cette réponse.
    InformationsquelleAutor Marc-André Lafortune
  3. 2

    Rapide remarque: en outre, AppendDOM plugin ressemble peut également simplifier la tâche.

    InformationsquelleAutor StaxMan
  4. 0

    Vous pouvez également utiliser le jQuery createHtml plugin qui permet de le faire:

    $("#divId").$table().$tr().$td().$b("some text");

    Il est un peu plus pratique que le .append() de la chaîne que vous pouvez mettre du contenu html et les attributs dans les éléments que vous leur string le long de:

    $("#divId").$table({class: "clean"}).$tr().$td({id: "textId"}).$b("some text");
    InformationsquelleAutor efunneko