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

小提琴：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);
}

Answer 2

而不是$('</tr>').append($('<\td>').append('TD CONTENT'));

你应该尝试：$('<tr>').append($('<td>').append('TD CONTENT'));

您不需要关闭代码。除此之外.. \t将导致制表符而不是您想要的<td>

你应该查看这个问题：jQuery document.createElement equivalent?

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

2 个答案: