使用数组创建TextNode/appendChild

Question

我正在尝试以类似表格的方式打印出我的所有数组项。我正在为标题创建一个<th> 标记，并为数组中的每个元素创建一个<tr> 标记（与标题数组分开）。每当我尝试这样做时，我都会得到预期的结果，但所有数组元素都只是一个长字符串。所以我得到这样的东西：

站点 1 站点 2 站点 3 站点 4
1,2,3,4,5,6

我希望它返回：

站点 1 站点 2 站点 3 站点 4
1
2
3
4
5

我尝试过.join('\n')，但它不起作用

代码：

    //Print Items in Level1
var createLevel1CellTag = document.createElement('td');
createLevel1CellTag.id = 'Level1';
var Level1TextNode = document.createTextNode(Level1Items.join('\n'));
createLevel1CellTag.appendChild(Level1TextNode);
document.getElementById('theHeaderTag0').appendChild(createLevel1CellTag);

我可以使用for loop 来做到这一点，但是当我去创建元素 ID 时，它只会覆盖它。因此，当我使用我的 onmouseover/onmouseout 函数时，它只隐藏/显示 1 个数组元素。也许问题是我如何引用在for loop 中创建的所有这些 ID。所以我循环创建ID，然后我如何引用Level1x？

Answer 1

关于换行符，在 DOM 中，换行符由 <br> 元素表示，而不是 \n 字符。所以你应该遍历数组，并添加一个文本节点，后跟一个<br>。

var header = document.getElementById('theHeaderTag0');
var createLevel1CellTag = header.appendChild(document.createElement('td'));
createLevel1CellTag.id = 'Level1';

for (var i = 0; i < Level1Items.length; i++) {
    createLevel1CellTag.appendChild(document.createTextNode(Level1Items[i]));
    createLevel1CellTag.appendChild(document.createElement("br"));
}

我不完全遵循您关于按 ID 选择的替代问题。