Question

so i am in a bit of a jam here and having a really hard time trying to solve this dilemma.

Here is what i am trying to do:

There is a container div (id=posts) full of other divs (name=posts).
I want it to grab in those divs and, by even/odd position, append them inside 2 other divs.

These 2 other divs are generated by javascript, one floats left and the other floats right.

Then i want it to empty the container div and insert the floating divs.

So far i have managed everything but one thing; it is only using the first found div…

Here is the HTML code:

         <div id="posts">
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
        </div>

Here is the script that i have been working with so far:

    <script type="text/javascript">
        var container = document.getElementById("posts");
        var posts = document.getElementsByName("posts");
        var rdiv = document.createElement("div");
            rdiv.style.backgroundColor = "#0F0";
            rdiv.style.cssFloat = "right";
            rdiv.style.clear = "right";
        var ldiv = document.createElement("div");
            ldiv.style.backgroundColor = "#F00";
            ldiv.style.cssFloat = "left";
            ldiv.style.clear = "left";
        for (i=0; i<posts.length; i++){
            if (i%2){
                rdiv.appendChild(posts[i]);
                }else{
                ldiv.appendChild(posts[i]);
                }
            }
            container.innerHTML = "";
            container.appendChild(rdiv);
            container.appendChild(ldiv);
    </script>

Now what this is doing is that it creates the left and right floating divs normally, but it only appends the first div inside both, the rest goes kabluey, can anyone help me with this one?

Answer 1

The main issue you are having is: appending a live element to another element, removes the element from its original location, causing problems with the loop.

To fix this, store the elements into a temporary array, appending them to their corresponding div’s only once the looping is done:

    var temp1 = [], temp2 = [];
    for (i=0; i<posts.length; i++){
        if (i%2){
            temp1.push(posts[i]);
            }else{
            temp2.push(posts[i]);
            }
        }
    for(var i = 0; i < temp1.length; i++) {
        rdiv.appendChild(temp1[i]);
    }
    for(var i = 0; i < temp2.length; i++) {
        ldiv.appendChild(temp2[i]);
    }

You can see the full working example here: http://jsfiddle.net/FqSMw/