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 元素。如果要复制元素，可以克隆它：

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

如果将节点附加到新位置，它会被移动：

将一个节点添加到指定父节点的子节点列表的末尾。如果节点已经存在，则将其从当前父节点中删除，然后添加到新的父节点。

于 2013-01-14T12:32:20.200 回答
0

因为您只创建了一个并一遍又一遍地附加它。您必须多次调用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

请将您的代码更改为此功能，它可能会帮助您...

    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

在你的脚本中试试这个 

     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 回答