Показывать содержание [объект HTMLUListElement] с помощью JavaScript

Question

У меня есть Java-функция, которая генерирует список уль на основе массива передается при помощи подобного подхода к этому - Create a <ul> and fill it based on a passed array

Однако, когда я сделать следующее .. .

document.getElementById("list").innerHTML = generateListFromArray(array); 

Все, что печатается в

[object HTMLUListElement] 

Может кто-нибудь сказать мне, как распечатать содержимое в DIV в HTML?

Answer 1

Вы создаете правильный элемент UL (HTMLUListElement), что отлично. Вы можете использовать это непосредственно простое добавление его к цели:

document.getElementById("list").appendChild(generateListFromArray(array)); 

Если цель уже содержит контент, который вы хотите заменить (а не добавлять), вы можете очистить целевой элемент первой :

var list = document.getElementById("list");  // Get the target element 
list.innerHTML = "";       // Remove previous content 
list.appendChild(generateListFromArray(array)); // Append your generated UL 

Там просто нет никаких причин, вообще, чтобы преобразовать элемент, созданный для разметки первой (с помощью .innerHTML или .outerHTML на возвращаемое значение generateListFromArray).

Еслиlist также ul и вы хотите заменить , вы можете сделать это с insertBefore и removeChild:

var list = document.getElementById("list");  // Get the target element 
var parent = list.parentNode;     // Get its parent 
var newList = generateListFromArray(array);  // Get the new one 
parent.insertBefore(
    newList,         // Insert the new list... 
    list          // ...before the old one 
); 
parent.removeChild(list);      // Remove the old 
newList.id = "list";       // Give the new list the ID the 
               // old one had 

Answer 2

generateListFromArray возвращает элемент HTMLUListElement. Самое простое решение, чтобы написать его outerHTML:

document.getElementById("list").innerHTML = generateListFromArray(array).outerHTML; 

Однако, если #list элемент в HTML уже UL, то вы не хотите иметь дополнительный <ul></ul> (разметка будет недействителен). В этом случае вам нужно будет использовать innerHTML:

document.getElementById("list").innerHTML = generateListFromArray(array).innerHTML; 

Answer 3

Вы хотели бы использовать appendChild() метод:

document.getElementById("list").appendChild(generateListFromArray(array))); 

Answer 4

Либо использовать innerHTML или outerHTML:

document.getElementById("list").innerHTML = generateListFromArray(array).innerHTML; 

Используйте innerHTML если вы уже есть list как <ul>.