createTextNode/appendChild с использованием массива

Question

Я пытаюсь распечатать все элементы массива в таблице, как это делается. Я создаю тег <th> для заголовков и тег <tr> для каждого элемента массива (отдельно от массива заголовков). Всякий раз, когда я пытаюсь сделать это, я получаю ожидаемый результат, за исключением того, что все элементы массива являются только одной длинной строкой. Так что я получаю что-то вроде этого:

сайта 1 сайта 2 сайта 3 сайта 4
1,2,3,4,5,6

и я хочу, чтобы вернуться:

сайт 1 сайт 2 сайта 3 сайта 4

Я пытался делать .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 из элементов массива. Может быть, вопрос в том, как я могу ссылаться на все те ID, которые созданы в 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")); 
} 

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