javascript - 为什么显示的是 [object HTMLCollection] 而不是我创建的元素？

Question

在 Javascript 中，我正在尝试创建一个新的 div。这是我添加来制作 div 的内容。

html+= "<div>" + concerts + "</div>";

但在我的浏览器中，它会在 div 标签应在的位置显示 [object HTMLCollection]。

音乐会是一个预定义的变量。

任何人都可以向我解释一下我可能会缺少什么来完成这项工作。提前致谢。

Answer 1

concerts 显然是元素的集合，例如您从 getElementsByTagName 等获得的元素。当你这样做时

"<div>" + concerts + "</div>"

...您隐式调用它的 toString，因此您得到了 "[object HTMLElementCollection]" 字符串。

如果要将集合中的所有元素放在一个 div 中，然后将该 div 添加到页面中，则不能使用字符串连接:

var div = document.createElement('div');
Array.prototype.slice.call(concerts).forEach(concerts, function(concert) {
    div.appendChild(concert);
});
document.body.appendChild(div); // Or wherever you want to add the div

其中的 Array.prototype.slice.call(concerts) 部分将 HTMLElementCollection 转换为真正的数组，然后我们在该数组上使用 forEach 进行循环并将元素移动到 div 中。 (This answer 对此进行了更详细的介绍。)(我们需要其中的 slice 部分，因为 HTMLElementCollections 通常是 live 集合，因此将第一个元素移动到 div 中会将其从集合中取出，这会弄乱 forEach。)

此示例以不在 div 中的四个段落开始。然后，当您按下按钮时，它会创建一个带有内边距和边框的 div，并将段落移入其中:

document.querySelector("button").onclick = function() {
    var concerts = document.getElementsByTagName("p");
    var div = document.createElement('div');
    div.className = "foo";
    Array.prototype.slice.call(concerts).forEach(function(concert) {
        div.appendChild(concert);
    });
    document.body.appendChild(div); // Or wherever you want to add the div
};

.foo {
  border: 1px solid black;
  padding: 4px;
}

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<button type="button">Click me</button>