jQuery动态创建table/tr/td或etc并追加属性

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()任何地方使用,它也有助于防止输出中的跨站点脚本攻击.

Answer 2

你能用字符串制作一个"模板"吗？如果是,那么它存储在一个"常数"变量(例如,在全局范围内定义),含占位符实际变量的,比如{0},{1}等等,因为你会在C#的使用string.format()方法.

所以,你会得到这样的代码:

var rowTemplate = "<tr><td>{0}</td><td>SomePredefinedText {1}</td></tr>";
var alternateRowTemplate = "<tr><td class='a'>{0}</td><td>SomewhatDifferent {1}</td></tr>";
 ...... somewhere deep in your code
 $("#someElement").append(
        rowTemplate.format("myvalue1", "myvalue2")
       ).append(
        alternateRowTemplate.format("myvalue3", "myvalue4")
       );

然后,您将根据以下答案使用string.format实现:jQuery中String.format的等效项