使用 jQuery 构建 HTML (~= DOM)答案

【问题标题】：Building HTML (~= DOM) using jQuery使用 jQuery 构建 HTML (~= DOM)
【发布时间】：2010-10-22 18:05:19
【问题描述】：

我可能做错了什么，但我一直无法找到一种动态构建基本 HTML/DOM 结构（如列表）的好方法。简单的示例是在给定输入（如 json（对象））的情况下构建表格（表格元素、行、单元格，以及正确转义的文本内容）。

我遇到的问题是大多数调用（如“.append()”、“.html()”、“.text()”）似乎并没有以直观的方式链接（无论如何对我来说）。例如，您不能执行以下操作：

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

text() 调用似乎清除了主要级别的内容；并附加同样在同一范围内添加内容。我希望 append() 返回正在添加的内容，但它似乎返回了自己的上下文。

我知道有一个简单的“appendText()”扩展可以帮助完成最后一部分。但是其他人呢？

为了它的价值，现在我恢复到 DOM，通过类似的东西

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

但这很冗长。

所以我希望我遗漏了一些非常明显的东西......但是什么？除了 append() 之外的调用？

我尝试浏览 jQuery 参考文档、谷歌搜索，但大多数文档只是使用“将所有内容嵌入字符串”；有问题，包括没有正确引用文本内容。

【问题讨论】：

【解决方案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");

【讨论】：

后者会起作用——前者的问题是文本可能包含与号和小于号。第二个听起来像它会做的伎俩。我想我没有很好地阅读 appendTo() 的文档，不知何故我认为它不会以这种方式工作。给定您的样本，如果确实如此，那是完全有意义的。 :)
在您的第三个示例中，您可以缩短事件并执行 $('').text('bolded text');
嗯。实际上......由于顺序反转（我首先错过了），当在循环中添加列表条目时，它变得有点棘手。不过应该还是可以的。
最后一个解决方案不起作用，如果"some text" 存储在变量中，第二个解决方案很危险。这是我在 SO 上找到的第一个错误解决方案！
第一个例子用"some text" 清除了整个表，所以它的作用完全一样，问题的作者认为是违反直觉的（“text() 调用似乎清除了以下位置的内容主级别；并且附加同样在同一范围内添加内容。")。因为我的编辑被拒绝了，所以我发布了正确的（恕我直言）版本：$("#divId").append($("<table>").append($("<tr>").text("some text"))) - 这个版本也在这个线程中发布了below；

【解决方案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");

【讨论】：