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的等效項

Answer 3

您可以創建一個StringBuilder，就像C＃中的一樣。 這是Telerik Extensions for ASP.NET MVC的一個片段：

$.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采用布爾表達式，或rep重復給定的字符串幾個次）。

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