Создание HTML (~ = DOM) с помощью jQuery

Я могу делать что-то неправильно, но я не смог найти хороший способ для создания базовых структур HTML/DOM, например списков, динамически. Простым примером могло бы стать создание таблицы (элемент таблицы, строки, ячеек, с соответствующим образом экранированным текстовым контентом), вводимый как json (объекты).

Проблема заключается в том, что большинство вызовов (например, ".append()", ".html()", ".text()" ) не кажутся цепочкой в интуитивном (ко мне, так или иначе) пути. Например, вы не можете делать что-то вроде:

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

text() вызов, кажется, уничтожает контент на основном уровне; и добавляет также добавление материала в пределах того же объема. Я бы ожидал, что appennd() вернет добавляемый контент, но, похоже, возвращает свой собственный контекст.

Я знаю, что есть простое расширение "appendText()", которое помогает с последней частью. Но как насчет других?

Для чего это стоит, прямо сейчас я возвращаюсь к DOM, чем-то вроде

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

но это довольно многословное.

Итак, я надеюсь, что у меня что-то совершенно очевидно... но что? Вызовите другого, кроме append()?

Я пробовал просматривать справочные документы jQuery, googling, но большинство документов просто используют "вставлять все вещи в строку"; который имеет проблемы, в том числе проблемы с неправильным цитированием текстового контента.

(также: нет, это не дублирует JQuery: создайте HTML в памяти, а не в DOM

Ответ 1

Вы можете сделать это:

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

как:

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

или

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

Ответ 2

Вы можете использовать append:

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

Если вы действительно настаиваете, вы можете использовать appendTo, но он менее интуитивно понятен, будет медленнее и потребует еще нескольких нажатий клавиш:

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

В любом случае важно использовать .text("...") для вызова специальных символов (и избегать атак XSS).

Еще лучше, когда вам становится скучно писать их, вы действительно хотите посмотреть jsrender, mustache, handlebars, doT или любой другие из многих решений для шаблонов javascript. Это позволяет вам сохранять свой код отдельно от вашего HTML (думаю, MVC) и делает его более понятным, что вы строите. Это также намного легче изменить.

Ответ 3

Быстрое примечание: кроме того, AppendDOM плагин выглядит так, что он также может упростить задачу.

Ответ 4

Вы также можете использовать плагин jQuery createHtml, который позволяет:

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

Немного более удобно, что цепочка .append() в том, что вы можете поместить html-контент и атрибуты в элементы, когда вы их строкой:

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