使用jQuery构建HTML(〜= DOM)

Question

我可能做错了什么,但我还没有找到一种很好的方法来动态地构建基本的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"))....

但那很啰嗦.

所以我希望我错过了一些完全明显的东西......但是什么呢？除了追加()以外的电话？

我尝试浏览jQuery参考文档,谷歌搜索,但大多数文档只是使用"嵌入字符串中的所有东西"; 哪些问题,包括没有正确引用文本内容的问题.

(还有:不,这不是"JQuery:在'内存'而不是DOM中构建HTML"的重复"

Answer 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");

Answer 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,胡子,把手,doT或许多javascript模板解决方案中的任何其他.它允许您将代码与HTML分开(想想MVC),并使您更清楚自己构建的内容.修改起来也容易得多.