Search code examples
javascriptgetelementbyidappendchildsetattribute

how to create an element in a loop and append it (5 times one by one) to the particular div?

Im trying to create an element(image) and then set a loop that would produce 5 images in one div(its id="leftSide"). Heres my code:

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

Body onload has to call the function, but nothing happens. Div remains "empty"

Solution

  • Try This Code

    <!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>