Question

我该怎么做：

 var html = [];
 var tr = document.createElement('tr');
 var tr_two = document.createElement('tr');
 var tr_three = document.createElement('tr');
 html.push(tr);
 html.push(tr_two);
 html.push(tr_three);

 html.join(''); //This doesnt work

 document.getElementById('tbody').appendChild(html);

所以我需要以一种可行的方式加入我的数组，所以我打了一次DOM。

Answer 1

尝试：

 var tbody = document.getElementById('tbody');
 html.forEach(funtion(node) {
     tbody.appendChild(node);
 });

Answer 2

您正在尝试加入DOM元素而不是字符串。

您可以使用outerHTML来获得您想要的内容。

 var html = [];
 var tr = document.createElement('tr');
 var tr_two = document.createElement('tr');
 var tr_three = document.createElement('tr');
 html.push(tr.outerHTML);
 html.push(tr_two.outerHTML);
 html.push(tr_three.outerHTML);


 html.join(''); //Now it will work

并附加到DOM使用

document.getElementById('tbody').innerHTML += html.join('');

Answer 3

appendChild（）函数只能用于节点，而不能用于字符串。要使用当前代码执行此操作，请将其更改为以下内容：

var html = [];
var tr = document.createElement('tr').appendChild(document.createTextNode("tr 1"));
var tr_two = document.createElement('tr').appendChild(document.createTextNode("tr 2"));
var tr_three = document.createElement('tr').appendChild(document.createTextNode("tr 3"));

html.push(tr);
html.push(tr_two);
html.push(tr_three);

var tbody = document.getElementById("tbody");

html.forEach(function(elem) {
    tbody.appendChild(elem);
})

我已经为每个创建的tr添加了文本节点，因此您可以看到每个节点之间的差异。

forEach循环只是迭代你创建的数组中的每个元素，并将每个元素追加到你指定的元素。

Here's a JSFiddle.

连接元素数组以将其附加到节点

3 个答案: