1

Javascript を使用して、XML ドキュメントから値を取得しました。取得した値と同じ数のタグを生成しようとしています。forループを使用してこれを行うと思いますが、これを試してみると、画像が1つしか表示されません。

for(i=0; i<red; i++){
   document.getElementById("red").innerHTML = "<img src='slike/red.png'></img>";
}

これが機能しない理由はわかっていますが、自分で解決策を見つけることができなかったので、どの Javascript 関数が必要なのか疑問に思っています。

4

4 に答える 4

4

文字列連結を使用します。

html = '';
for(i=0; i<red; i++){
   html += "<img src='slike/red.png'></img>";
}
document.getElementById("red").innerHTML = html;

+=ループ内でto を割り当てるときにも使用できますが.innerHTML、ブラウザーは毎回 DIV コンテンツをフォーマットして再解析する必要があるため、効率が低下します。一発でやったほうがいいです。

于 2013-06-17T15:01:59.627 に答える
2

うーん、論理的に考えれば、赤のinnerHTMLが「赤」の回数だけ変化するようにコーディングしたようです。img の「赤」回を追加するのではなく、その 1 つの画像の「赤」回に変更するだけです。

では、代わりに次のようにしてみませんか。

var numberImages= "";

for(i=0; i<red; i++){
    numberImages += "<img src='slike/red.png' />";
} 

document.getElementById("red").innerHTML= numberImages;
于 2013-06-17T15:08:27.693 に答える
1

要素の innerHTML に単一の値を割り当てるたびに。

代わりに以下を使用してください。

var elem=document.getElementById("red");
for(i=0; i<red; i++){


       elem.innerHTML = elem.innerHTML+"<img src='slike/red.png'></img>";
    }
于 2013-06-17T15:04:33.793 に答える
0

DOM に多数の要素を追加する場合は、DocumentFragment不必要なリフローを避けるために を使用する必要があります。ここに簡単な例があります（およびフィドル）：

var fragment = document.createDocumentFragment();

for (var i = 0; i < 10; i++)
{
    var img = document.createElement('img');
    img.src = 'slike/red.png';

    fragment.appendChild(img);
}

document.getElementById('red').appendChild(fragment);

これにより、必要な数の要素を作成し、DOM を一度だけリフローするバッチで DOM に追加することができます。

于 2013-06-17T19:55:00.730 に答える