createTextNode/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, Итак, я делаю цикл создания идентификатора, а затем как сделать ссылку на 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"));
}

Я не совсем понимаю ваш альтернативный вопрос о выборе по идентификатору.