Aufbau von HTML (~= DOM) mit jQuery

Question

Vielleicht mache ich etwas falsch, aber ich habe keine gute Möglichkeit gefunden, grundlegende HTML/DOM-Strukturen wie Listen dynamisch zu erstellen. Einfaches Beispiel wäre der Aufbau einer Tabelle (Tabellenelement, Zeile, Zellen, mit richtig escaped Textinhalt) gegeben Eingabe wie json (Objekte).

Das Problem, das ich habe, ist, dass die meisten Aufrufe (wie z.B. ".append()", ".html()", ".text()") nicht intuitiv zu verketten sind (jedenfalls für mich). Zum Beispiel, Sie kann nicht etwas tun wie:

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

text()-Aufruf scheint den Inhalt auf der Hauptebene zu löschen; und Anhänge fügen ebenfalls Dinge im selben Bereich hinzu. Ich würde erwarten, dass appennd() den hinzugefügten Inhalt zurückgibt, aber es scheint seinen eigenen Kontext zurückzugeben.

Ich weiß, dass es eine einfache "appendText()"-Erweiterung gibt, die beim letzten Teil hilft. Aber wie sieht es mit anderen aus?

Im Moment greife ich auf DOM zurück, und zwar in etwa so

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

aber das ist ziemlich langatmig.

Ich hoffe also, dass ich etwas völlig Offensichtliches übersehe... aber was? Ein anderer Aufruf als append()?

Ich habe versucht, jQuery-Referenzdokumente zu durchsuchen und zu googeln, aber die meisten Dokumente verwenden einfach "alles in einen String einbetten", was Probleme mit sich bringt, einschließlich der Tatsache, dass Textinhalte nicht richtig zitiert werden.

(außerdem: nein, dies ist kein Duplikat von "JQuery: HTML im 'Speicher' statt im DOM aufbauen"

Answer 1

Sie können dies tun:

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

als entweder:

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

oder

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

Answer 2

Sie können verwenden append :

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

Wenn Sie wirklich darauf bestehen, können Sie Folgendes verwenden appendTo aber es ist weniger intuitiv, langsamer und erfordert einige Tastenanschläge mehr:

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

In jedem Fall ist es wichtig, die .text("...") um Sonderzeichen zu umgehen (und XSS-Angriffe zu vermeiden).

Noch besser Wenn Ihnen das Schreiben dieser Texte zu langweilig wird, sollten Sie sich wirklich mit folgenden Themen befassen jsrender , Schnurrbart , Lenker , doT oder eine andere der vielen Javascript-Templating-Lösungen. Es ermöglicht Ihnen, Ihren Code getrennt von Ihrem HTML (denken MVC) zu halten und macht es viel klarer, was Sie bauen. Es ist auch viel einfacher zu ändern.

Answer 3

Kurze Anmerkung: zusätzlich, AppendDOM Plugin scheint die Aufgabe ebenfalls vereinfachen zu können.

Answer 4

Sie können auch die jQuery createHtml Plugin, mit dem Sie das tun können:

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

Sie ist etwas praktischer als die .append()-Kette, da Sie HTML-Inhalte und Attribute in die Elemente einfügen können, während Sie sie aneinanderreihen:

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