Question

我有这个代码用于向现有表附加一行

$('#factorTable').append('<tr id="ft-' + id + '"><td id="ftn-' + id + '">' + name + '</td><td id="ftp-' + id + '">' + price + '</td><td id="ftNum-' + id + '">' + number + '</td><td id="ftSum-' + id + '">' + sum + '</td></tr>');

但是我需要在不使用jQuery的情况下完成它。如何将其转换为仅本机javascript我知道我可以使用以下代码向表中插入一行：

// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");

// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(0);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// Add some text to the new cells:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

但是，正如您在我的jQuery代码中看到的，我需要将id添加到<td>和<tr>标记。

Answer 1

如果您不需要支持IE8或IE9 ，则可以使用insertAdjacentHTML：

document.getElementById('factorTable').insertAdjacentHTML(
    'beforeend',
    '<tr id="ft-' + id + '"><td id="ftn-' + id + '">' + name + '</td><td id="ftp-' + id + '">' + price + '</td><td id="ftNum-' + id + '">' + number + '</td><td id="ftSum-' + id + '">' + sum + '</td></tr>'
);

但caniuse says表示IE8和IE9

（抛出）＆＃34;此操作的目标元素无效。＆＃34;在table，tbody，thead或tr元素上调用时出错。

当您在tr中插入td时，我会假设您在tbody上调用此内容。

如果您需要IE9（或更早版本）支持，我们需要依靠createElement：

var tr = document.createElement('tr').
tr.id = 'ft-' + id;
tr.innerHTML = '<td id="ftn-' + id + '">' + name + '</td><td id="ftp-' + id + '">' + price + '</td><td id="ftNum-' + id + '">' + number + '</td><td id="ftSum-' + id + '">' + sum + '</td>';
document.getElementById('factorTable').appendChild(tr);

使用js将HTML代码附加到元素

1 个答案: