2

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

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

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

Concerts 是一个预定义的变量。

谁能向我解释一下我可能缺少什么来完成这项工作。提前致谢。

4

3 回答 3

5

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.（这个答案更详细地介绍。）（我们需要那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;
}
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<button type="button">Click me</button>

于 2015-12-11T09:23:49.200 回答
0

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

于 2015-12-11T09:28:57.047 回答
0

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

于 2015-12-11T09:22:10.457 回答