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

标签 javascript jquery html

我有这段代码用于在现有表中追加一行

$('#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 的情况下这样做。如何将其转换为仅 native 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 添加到 标记。

最佳答案

如果不需要支持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

(Throw) an "Invalid target element for this operation." error when called on a table, tbody, thead, or tr element.

当您插入带有 tds 的 tr 时,我假设您是在 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);

关于javascript - 使用 js 将 HTML 代码附加到元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33888266/

相关文章:

javascript - 先进的Vue路由器防护

javascript - 如何在谷歌仪表板表中为 TR 赋值

html - 如何使用flexbox通过垂直对齐的列和斑马阴影实现表格外观?

javascript - 尝试使用清晰的 Node.js 调整流图像的大小

javascript - 改进了使用模板字符串和arr.reduce()呈现的导航列表的语法

javascript - 使用jQuery模板访问多维JSON

jQuery-使用 parent ID按类(class)选择 child

php - HTML/PHP : Which parts of an HTML head can be saved in a separate file

清除 Canvas 后 JavaScript Canvas 元素不显示

javascript - 追加新元素后,jQuery主题不适用