加入元素的数组将其追加到节点

我怎么可以这样做：加入元素的数组将其追加到节点

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一次。

来源

2016-05-23 andresmijares25

'// This does not work'你是什么意思？你有错误吗？ – gurvinder372

连接只会对字符串数组起作用。 – jcubic

console.log（html）; – epascarello

尝试：

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

来源

2016-05-23 13:20:38 jcubic

是的，这将是默认选项，但是，我正在寻找一种方式来打DOM只有一次 – andresmijares25

您试图加入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('');

来源

2016-05-23 13:35:21 JagsSparrow

并追加到DOM使用'的document.getElementById（“TBODY”）。innerHTML的+ = html.join（“” ）;' – jcubic

是的，谢谢你 – JagsSparrow

真棒！但如果我有一个按钮怎么办？加入（''）不能正常工作我认为 – andresmijares25

的的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 S的。

的forEach循环刚刚超过在你创建的数组的每个元素进行迭代，并追加每一个在时间到指定的元件。

Here's a JSFiddle.

来源

2016-05-23 14:29:39 pinjasaur

加入元素的数组将其追加到节点

回答

相关问题