Question

我最近在Code Review Stack Exchange上发布了一些代码

https://codereview.stackexchange.com/questions/8783/how-can-i-improve-performance-for-my-javascript-table-class

我的代码会使用JavaScript中对象的值填充HTML表格

在我收到的答案中，有人建议我使用DOM在我的表中添加行而不使用.innerHTML或jQuery。我想这样做，但我不知道如何。

我的代码如下所示：

var html = ... // code to get html
$(tbody).html(html);

如何在不使用innerHTML或jQuery的情况下将变量html中的行放入我的表体中。

Answer 1

我认为建议可能是您在将文本字符串内容放入元素中时使用.innerText而不是.innerHTML（预先存在，或者您正在创建的元素）。这样做更安全。原因是：如果以某种方式检索内容，你会得到一个类似“<script> //do something bad </script>”的字符串，那么当使用.innerHTML附加到DOM时，将会执行这个有潜在危险的脚本。但是，如果使用.innerText，它将仅作为字符串放在DOM中，而不是作为要运行的脚本进行评估。

Answer 2

如果你有一个HTML字符串，你不想像Inerdial在评论中指出的那样自己解析它。让浏览器用innerHTML / jQuery为你解析它。

我将向您展示如何进行纯DOM操作：

var thediv = document.createElement('DIV');

thediv.style.backgroundColor = 'white';
thediv.appendChild(document.createTextNode('some text'));

document.getElementById('someElement').appendChild(thediv);

这是基础知识，您可以创建表格和表格行并以这种方式插入它们。

为什么不使用jQuery或innerHTML是另一个问题。

编辑：在div中添加了一些文字

由于

Answer 3

如果您使用的方法似乎正在尝试：

var html = '<tr><td>This is a div</td></tr>';
$(tbody).html(html);

您将使用innerHTML。为避免这种情况，您需要创建DOM节点：

var cell = document.createElement('td');
var row = document.createElement('tr');
var tbody = document.getElementsByTagName('tbody')[0];

row.appendChild(cell);
tbody.appendChild(row);

当然，这会将空td附加到tr并将其附加到tbody。要在单元格中放置内容，您仍然必须使用innerHTML：

var cell = document.createElement('td');
cell.innerHTML = "This is text inside of the created 'td' DOM node.";
var row = document.createElement('tr');
var tbody = document.getElementsByTagName('tbody')[0];

row.appendChild(cell);
tbody.appendChild(row);

JS Fiddle demo

使用jQuery，可以将其浓缩为：

var cell = $('<td />').text("This is text inside of the created 'td' DOM node.");
var row = $('<tr />');
var tbody = $('tbody:first');

row.append(cell).appendTo(tbody);

JS Fiddle demo

比较方法的链接（'vanilla'JavaScript与jQuery），at JS Perf。

如何在不使用.innerHTML的情况下使用DOM在HTML表中设置值？

3 个答案: