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 实现：Equivalent of String.format in jQuery

Answer 3

您可以创建一个 StringBuilder，就像 C# 中的那样。这是来自Telerik Extensions for ASP.NET MVC的sn-p：

$.stringBuilder = function() {
    this.buffer = [];
};

$.stringBuilder.prototype = {

    cat: function(what) {
        this.buffer.push(what);
        return this;
    },

    string: function() {
        return this.buffer.join('');
    }
};

这样就可以得到如下代码：

var html = new $.stringBuilder();
for (var i in data)
    html.cat("<tr><td>").cat(i).cat("</td><td></tr>");

$('#element').append(html.string());

这种方法的好处是您可以快速连接（数组连接在 IE6 下表现更好），并且您可以使用其他有用的函数扩展对象（例如，catIf 采用布尔表达式，或 @987654327 @ 多次重复给定字符串）。

Answer 4

或者您可以使用array.join 函数来代替将字符串连接在一起。

    for(var i=0;i<arr.length;i++)
    {
      arr[i] = "<tr>" + sth + "</tr>";       
    }

node.innerHTML = arr.join(''); 

Answer 5

window.onload = function(){
    var btn = document.createElement("button");
    btn.setAttribute("id", "submit_bttn");
    btn.style.width = 125 + "px";
    btn.style.height = 50 + "px";
    btn.innerHTML = "Submit";
    document.body.appendChild(btn);

    var x = document.getElementById("submit_bttn");
    x.onclick = function(){
        alert("hi");
    }
}