0

なぜこのforループが機能しないのですか？

javascript：

function create(){
    var newDiv = document.createElement("input");
    var character = "piyush";

    var i =0;

    newDiv.type = "text";
    newDiv.style.background = "red";
    newDiv.style.width ="20px";
    newDiv.style.height ="20px";
    for( i =0; i< character.length ; i++)
    {

    document.getElementById("tryingin").appendChild(newDiv);
    }

 }

html：

<div id="tryingin" onMouseOut="create()" style="width:200px; height:200px; background-color:black"> </div>

forループで何かを警告すると。警告ボックスが次々に6回表示されます（character.length == 6として）。しかし、なぜ分割に6つのテキストボックスが追加されていないのですか？そして、6つのテキストボックスすべてを一度に追加するための正しいコードは何である必要がありますか。

感謝します。よろしく！

4

5 に答える 5

3

要素がすでにDOMの一部である場合は、.appendChild最初にその要素を現在の親から切り離し、新しい親にアタッチします。MDNドキュメントから：

childがドキュメント内の既存のノードへの参照である場合appendChild、それを現在の位置から新しい位置に移動します（つまり、他のノードに追加する前に、そのノードを親ノードから削除する必要はありません）。

あなたの場合、DOM要素は1つだけです。要素を複製したい場合は、それを複製することができます：

var parent = document.getElementById("tryingin");
for (...) {
    parent.appendChild(newDiv.cloneNode());
}
于 2013-01-14T12:31:42.343 に答える
2

ノードを新しい場所に追加すると、移動されます：

指定された親ノードの子のリストの最後にノードを追加します。ノードがすでに存在する場合は、現在の親ノードから削除されてから、新しい親ノードに追加されます。

于 2013-01-14T12:32:20.200 に答える
0

コードをこの関数に変更してください...

    function create(){
        var character = "piyush";
        var i =0;

        for( i =0; i< character.length ; i++)
        {
            var newDiv = document.createElement("input");
            newDiv.type = "text";
            newDiv.style.background = "red";
            newDiv.style.width ="20px";
            newDiv.style.height ="20px";
            document.getElementById("tryingin").appendChild(newDiv);
        }

 }
于 2013-01-14T12:31:52.317 に答える
0

1つだけ作成し、それを何度も追加したためです。document.createElement("input")複数の要素を作成するには、複数回呼び出す必要があります。

var character = "piyush";

for(var i =0; i < character.length; i++) {
    var newDiv = document.createElement("input");
    newDiv.type = "text";
    newDiv.style.background = "red";
    newDiv.style.width ="20px";
    newDiv.style.height ="20px";
    document.getElementById("tryingin").appendChild(newDiv);
}
于 2013-01-14T12:31:59.037 に答える
0

スクリプトでこれを試してください 

     var character = "piyush";

    for(var i =0; i < character.length; i++) 
    {
    var div = document.createElement("input");
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "white";
    div.innerHTML = "Hello";

    document.body.appendChild(character );
    }

これがあなたのために働くことを願っています。

于 2013-01-14T12:40:13.760 に答える