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

StackOverflow https://stackoverflow.com/questions/805159

  •  03-07-2019
  •  | 
  •  

Вопрос

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

Проблема, с которой я сталкиваюсь, заключается в том, что большинство вызовов (таких как ".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, гуглить, но большинство документов просто используют "встроить все содержимое в строку".;у которого есть проблемы, в том числе связанные с неправильным цитированием текстового контента.

(также:нет, это не дублирование "jQuery:Создайте HTML в ‘памяти’, а не в DOM"

Это было полезно?

Решение

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

$("#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");

Другие советы

Вы можете использовать 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, усы, руль, Точка или любое другое из множества решений для создания шаблонов javascript.Это позволяет вам хранить ваш код отдельно от вашего HTML (например, MVC) и делает гораздо более понятным то, что вы создаете.Его также гораздо проще модифицировать.

Краткое примечание:дополнительно, Придаточный дом похоже, что плагин также может упростить задачу.

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

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

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

$("#divId").$table({class: "clean"}).$tr().$td({id: "textId"}).$b("some text");
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top