Question

I’ve got a structure set up like this:

<div id="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

At some point, I want to prepend more “child”s to the container.

$("#container").prepend('<div class="child"></div>');

This works fine with all browsers except with Firefox. Firefox appends the new child. As a result, since the same code is used on page load, the children are actually upside down.

I’ve tried using everything from .innerHTML, .before(), using .html(child + old_html), etc etc, but I can’t for the life of me get Firefox to prepend the html properly.

Thanks in advance if anyone can help me fix this.

Edit: added missing “

Answer 1

After some research, it appears that the prepend() was not at fault, but Firefox actually reversed my keys in the json. To illustrate what happend, my json looked like this:

{"shouts":[
"12"{<some data concerning id=12 here>}, 
"11"{<some data concerning id=11 here>}, 
"10"{<some data concerning id=10 here>},
etc ]}

Chrome, and all other browsers, reversed this order in the loop, since they probably assumed the “12”, “11” and “10” as keys in the array. When looping, this would produce 10, 11, and 12. Firefox however, didn’t do this, which led to the reversal.

The solution was to remove the IDs from the json (this made the behaviour uniform, ie. all browsers displayed it in reverse order now), and then reverse the order again for the json, which would produce this:

{"shouts":[
{<some data concerning id=10 here>}, 
{<some data concerning id=11 here>}, 
{<some data concerning id=12 here>},
etc ]}

That solved the problem! (As one can see from the example.php now.) Thanks for your help everyone.