Modify innerHTML of a child div

Question

I am new to JavaScript. What I am trying to do is make a div and inside of it there will be another div. Within my script code I am trying to create new instances of that div using factory function if that is the right name for it, and then change the innerHTML of the child div if that is possible. Thanks in advance.

<div class = "loopBlock"  style="width:350px;">
    <fieldset>
        <legend style="color:black;font-weight:bold;">While Loop</legend>
        <table>
            <tr>
            <td>Condition:</td>
            <td><input type="text" /></td>
            </tr>
        </table>

        <div class = "codeDivClass" id = "codeDiv">
            HelloWorld!
        </div>
    </fieldset>
</div>


<script>
    var loopDiv = document.getElementsByClassName("loopBlock");
    var loopi =1;

    function loopObject(){
        var loopDivObject = document.createElement("div");
        loopDivObject.innerHTML = loopDiv[0].innerHTML;
        loopDivObject.className = "loopBlock";
        loopDivObject.id = "loopBlock"+loopi;
        loopi++;    
        return loopDivObject;
    };

    var functionCodeDiv = document.getElementById("codeDiv");

    for (i=0; i<5; i++){
        var tempLoop = loopObject();
        functionCodeDiv.appendChild(tempLoop);
        var id = "loopBlock"+i+1;
        document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye";
    }

</script>

Answer 1

Didn't really get how it should work, but I'm sure I've found a mistake.

    var id = "loopBlock"+i+1;

you have to replace with:

   var id = "loopBlock"+(i+1);

Example i is 2.

In first case you get: "loopBlock21"

In second (my) case , you'll get "loopBlock3"

Answer 2

The problem is in operator precedence . Since in this line

var id = "loopBlock" + i + 1;

you have two + (unary plus) operators with the same precedence they will act as a string concatenation operators, because one of the operands is a string ("loopBlock").

In your case you want to group i + 1 with parentheses to make the expression evaluate first as arithmetic addition operator. After that string concatenation with "loopBlock" will produce expected result:

var id = "loopBlock" + (i + 1);

Demo: http://jsfiddle.net/0091n9tt/

Answer 3

I think you're problem in is this line:

document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye";

What you are actually doing is trying to gett divs inside the newly created div (loopBlock), which is empty.

You already have a reference to the block you want to modify the innerHTML; you can simply use it like this:

tempLoop.innerHTML = "bye";

So you're for loop would look like this:

for (i=0; i<5; i++){
    var tempLoop = loopObject();
    functionCodeDiv.appendChild(tempLoop);
    tempLoop.innerHTML = "bye";
}

Note that you don't need the id anymore.