Display content of [object HTMLUListElement] using javascript

问题:

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?

回答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 

回答2:

You might like to use appendChild() method:

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

回答3:

Either use innerHTML or outerHTML:

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

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

回答4:

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; 

文章来源: Display content of [object HTMLUListElement] using javascript