javascript - 使用 jQuery 创建新元素的正确方法是什么？

Question

我想知道使用 jQuery 创建新元素的正确方法是什么。例如，假设我有一个表，我想根据我拥有的对象列表在其中追加一些行，所以我目前的做法如下:

var list =
[
    {
        name: 'Banana',
        cost: 100
    },
    {
        name: 'Apple',
        cost: 200
    },
    {
        name: 'Orange',
        cost: 300
    }
];

var appendThis = '';

for(var key in list)
{
    var product = list[key];

    appendThis += '<tr>';
    appendThis += '<td>' + product.name + '</td>';
    appendThis += '<td>' + product.cost + '</td>';
    appendThis += '</tr>';
}

$('#producttable').empty().append(appendThis);

fiddle :https://jsfiddle.net/ahvonenj/ywjbrrak/

但我听说连接字符串并附加行是一个很好的方法，相反我应该创建 tr和td元素，我将列表中的数据附加到其中，然后将这些元素附加到 HTML 表中。

如果这看起来是正确的方法，那么它到底是如何完成的呢？我只创建过div以编程方式使用 $('</div>') 元素，但我不知道如何创建 tr像这样，并在其之上附加以编程方式创建的 td进入以编程方式创建的 tr .

它可能像这样工作吗:

var $row = $('</tr>').append($('<\td>').append('TD CONTENT'));

Answer 1

您可以使用语法 $("<element/>") 创建一个新元素:

$('#producttable').empty();

for(var key in list)
{
    var product = list[key];

    var $tr = $("<tr/>");
    $tr.append($("<td/>").text(product.name));
    $tr.append($("<td/>").text(product.cost));

    $('#producttable').append($tr);
}