使用 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

根本没有理由首先将您创建的元素转换为标记（通过在generateListFromArray 的返回值上使用.innerHTML 或.outerHTML）。

如果 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

使用innerHTML 或outerHTML：

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

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

Answer 3

您可能喜欢使用appendChild() 方法：

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

Answer 4

generateListFromArray 返回 HTMLUListElement。最简单的解决办法就是写它的outerHTML：

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

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

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