使用javascript显示[object HTMLUListElement]的内容

Question

我有一个javascript函数，它根据使用类似方法传入的数组生成ul列表 - Create a <ul> and fill it based on a passed array

然而，当我做以下事情时......

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

打印的所有内容都是

[object HTMLUListElement]

有谁能告诉我如何将内容作为HTML打印到div中？

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）。

如果<{strong> list也是ul，并且您想要替换，则可以使用insertBefore和{ {1}}：

removeChild

Answer 2

使用innerHTML或outerHTML：

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

如果您已将innerHTML作为list，请使用<ul>。

Answer 3

generateListFromArray返回HTMLUListElement。最简单的解决方案是编写outerHTML：

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

但是，如果HTML中的#list元素已经是UL，那么您不希望有额外的<ul></ul>（标记将无效）。在这种情况下，您需要使用innerHTML：

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

Answer 4

您可能希望使用appendChild()方法：

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