Display content of [object HTMLUListElement] using javascript

Question

I have a javascript function which generates a ul list based on an array being passed in using a similar approach to this - Create a <ul> and fill it based on a passed array

However, when I do the following...

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

All that gets printed is

[object HTMLUListElement]

Can anyone tell me how to print the contents into the div as HTML?

Answer 1

You're creating a proper UL element (HTMLUListElement), which is great. You can use that directly by simply appending it to your target:

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

If the target already contains content you want to replace (rather than add to), you can clear the target element first:

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

There's simply no reason, at all, to convert the element you created to markup first (by using .innerHTML or .outerHTML on the return value of generateListFromArray).

If list is also a ul and you want to replace it, you can do that with insertBefore and 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

Either use innerHTML or outerHTML:

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

Use the innerHTML if you already have the list as <ul>.

Answer 3

generateListFromArray returns HTMLUListElement. The simplest solution is to write its outerHTML:

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

However, if #list element in HTML is already a UL then you don't want to have extra <ul></ul> (markup will be invalid). In this case you would need to use innerHTML:

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

Answer 4

You might like to use appendChild() method:

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