使用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 mustache , handlebars , doT 或者任何其他javascript模板解决方案。它允许您将代码与HTML分开(想想MVC),并使您构建的内容更加清晰。它也更容易修改。

快速提示:另外, AppendDOM 插件看起来也可以简化任务。

您还可以使用jQuery createHtml 允许您执行以下操作的插件:

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

使用.append()链更方便,因为您可以在元素中放置html内容和属性,同时将它们串在一起:

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