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

在Javascript中,我试图创建一个新的div.这是我为了制作div而添加的内容.

html+= "
" + concerts + "
";

但在我的浏览器中显示[object HTMLCollection] div标签应该在哪里.

音乐会是预定义的变体.

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

concerts显然是一个元素的集合,例如你得到的getElementsByTagName和类似的元素.当你这样做

"
" + concerts + "
"

......你暗中呼唤toString它,所以你得到那个"[object HTMLElementCollection]"字符串.

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

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.(这个答案更详细地说明了这一点.)(我们需要它的slice一部分,因为HTMLElementCollections是通常是活动集合,因此将第一个元素移动到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;
}

Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Click me