javascript - jQuery 动态创建表/tr/td 等并附加属性

Question

在一个例子中，我有这个结构(小例子):

<table id=example>
<tr class="blah test example"><td>Test1</td><td><a href="url">LINK</a>Test11</td></tr>
<tr class="blah test example"><td>Test2</td><td><a href="url">LINK</a>Test22</td></tr>
<tr class="blah test example"><td>Test3</td><td><a href="url">LINK</a>Test33</td></tr>
</table>

在 jQuery 中，我会像这样动态地创建它:

var test = "<table id=" + someIDVar + ">"
           + "<tr class=" + classOneVar 
+ classTwoVar + classThreeVar + ">"....

等等……(还有很多其他的东西要写)。在我附加它之后:

$(".somePlaceInHtml").append(test);

那么有没有其他方法可以用 jQuery 动态编写这样的结构呢？这对我来说是个问题，因为我有一个大结构，而不是我在示例中显示的那么小。主要原因是我想为自己和维护此代码的其他开发人员获得更好的可读性。

Answer 1

这是一个简化的例子:

  $(function() {
    var tbl = $('<table></table>').attr({ id: "bob" });
    var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(tbl);
    $('<td></td>').text("text1").appendTo(row);
    $('<td></td>').text("Test22").prepend($('<a></a>').attr({ href: "#" }).text("LINK")).appendTo(row);        
    tbl.appendTo($(".somePlaceInHtml"));        
  });

将行部分包装在一个循环中，用变量替换，在我看来它至少更容易维护/阅读，但我习惯了 jQuery，所以你的里程可能会有所不同，只是一个选项。

旁注，因为这在所有地方都使用了 .text()，所以它也有助于防止输出中的跨站点脚本攻击。