如何在表格单元格中动态插入div？

Question

我正在尝试将带动态ID的div添加到表格单元格中。

这就是我现在的做法：

var ringNr = 1;
function tableCreate(){
alert('tableCreate');
var newDiv = document.createElement('div');
newDiv.id = "ring0" + ringNr;
newDiv.style.height = "40px";
newDiv.innerHTML = "Hello";

$("#shoppingCart tbody").append(
    "<tr>"+
    "<td>"+this.appendChild(newDiv)+"</td>"+ //This line creates the error
    //More cells to add
    "</tr>");
ringNr++;
}; 

this.appendChild（newDiv）引发以下错误：Uncaught TypeError: Object [object global] has no method 'appendChild'

如何将此div添加到我的表格单元格而没有错误？

Answer 1

看看这段代码：

"<tr>"+
"<td>"+this.appendChild(newDiv)+"</td>"+ //This line creates the error
//More cells to add
"</tr>");

您正在构建一个字符串。如果要追加，则需要创建一个元素。

var tr = $("<tr/>");
var td = $("<td/>");
td.append(newDiv);
tr.append(td);
$("#shoppingCart tbody").append(tr);