Question

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

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

但在我的浏览器中显示[object HTMLCollection] div标签应该是。

音乐会是预定义的变种。

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

Answer 1

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

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

...你隐含地在其上调用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.（{{3更详细地介绍了这一点。）（我们需要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>

Answer 2

html必须是一个对象。当您尝试向对象添加内容时，它会将其转换为字符串，使其看起来像[object]。您可能不想仅仅+=，而是使用DOM API上的方法来插入音乐会（appendChild例如，如果您进行了一些更改，则可以正常工作）

Answer 3

使用+=，您将向字符串添加一个对象（看似是元素集合），从而导致对其toString()方法的隐式调用。所以你得到[object HTMLCollection]。

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

3 个答案: