javascript - 使用数组创建TextNode/appendChild

Question

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

站点 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 选择的替代问题。