如何在循环中创建一个元素并将其（5次一一）附加到特定的div？答案

【问题标题】：how to create an element in a loop and append it (5 times one by one) to the particular div?如何在循环中创建一个元素并将其（5次一一）附加到特定的div？
【发布时间】：2016-06-10 04:25:19
【问题描述】：

我m trying to create an element(image) and then set a loop that would produce 5 images in one div(its id="leftSide"). Heres 我的代码：

<script>    
    var number_of_faces = 0;
    var theLeftSide = document.getElementById("leftSide");

    function generate_faces() {
        for (number_of_faces = 0; number_of_faces < 6; number_of_faces++) {
            newFace = document.createElement("img");
            newFace.setAttribute(
              "src",
              "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
            );
            document.getElementById("leftSide").appendChild("img");
        }   
   }


</script>

正文 onload 必须调用该函数，但没有任何反应。 div 保持“空”

【问题讨论】：

标签： javascript getelementbyid appendchild setattribute

【解决方案1】：

试试这个代码

<!DOCTYPE html>
<html>
<head>
    <title>Blah</title>
</head>
<body>
<div id="leftSide">

</div>
<script>    
    var number_of_faces = 0;
    var theLeftSide = document.getElementById("leftSide");

    function generate_faces() {
        for (number_of_faces = 0; number_of_faces < 5; number_of_faces++) {
            newFace = document.createElement("img");
            newFace.setAttribute(
              "src",
              "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
            );
            theLeftSide.appendChild(newFace);
        }   
   }
   generate_faces();


</script>
</body>
</html>

【讨论】：

你在用这个做什么：var theLeftSide = document.getElementById("leftSide");如果你不使用它，你为什么要保留它？

【解决方案2】：

将document.getElementById("leftSide").appendChild("img"); 更改为document.getElementById("leftSide").appendChild(newFace);

【讨论】：

非常感谢！还有一个问题：关闭循环和函数大括号之间的空格（没有任何代码）： document.getElementById("leftSide").appendChild("img"); } } 影响函数返回未定义？
或者更好-更多 theLeftSide.appendChild(newFace); 否则在声明中保留那行代码是没有意义的。
不，在这种情况下，空格或空格不会影响代码

【解决方案3】：

您传递了一个字符串“img”而不是 newFace 元素。
使用document.getElementById("leftSide").appendChild(newFace);
并且循环应该是< 5 循环5次。

【讨论】：