2

Javascript で、新しい div を作成しようとしています。これは、divを作成するために追加したものです。

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

しかし、私のブラウザでは、div タグがあるべき場所に [object HTMLCollection] が表示されます。

コンサートは事前定義された変数です。

この仕事をするために私が欠けているかもしれないものを誰かが私に説明できますか? 前もって感謝します。

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 に含まれていない 4 つの段落から始まります。次に、ボタンを押すと、パディングと境界線のある 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

htmlオブジェクトでなければなりません。オブジェクトに何かを追加しようとすると、[オブジェクト] のように見える文字列に変換されます。おそらく+=、DOM API のメソッドを使用してコンサートを挿入するだけではなく、代わりにコンサートを挿入します (appendChildたとえば、いくつかの変更を加えた場合に機能する可能性があります)。

于 2015-12-11T09:22:10.457 に答える