Question

I’m having an annoying problem when dynamically adding divs to an existing div. I tried using the appendChild function, and also jQuery’s append function; both give the same result. You can see the problem on this jsFiddle:

http://jsfiddle.net/debu/5b3Qr/

If you press the ‘add stuff’ button, it will add several divs created dynamically. Inside the for-loop it creates a div, then adds two text-containing divs to that, before appending it to the “mainDiv”. Then outside the for-loop, I create two further divs; one of them has a style applied to it which has its background-color set to a light orange.

The problem is, that the divs created in the for-loop seem to inherit this orange background colour, even though .. well, even though the element with that background is added after them. And it’s not like the paragraph that comes after the orange-background div inherits the orange; it stays as it should, white.

I’ve played a lot with this and found no way to solve it. Any ideas?

Cheers,

debu

Answer 1

Turns out you were having issues with the divs (of class compHolder) you’re adding that have float:left applied.
You need to clear popupHeader3 with clear:both; to stop the header’s background affecting those 3 divs before it from acting strangely.

Like so:

.popupHeader3 {
    background-color: #FFBA9B;
    margin-top:1px;
    color: #000000;
    font-family: "ProximaNova";
    font-size: 18px;
    clear:both;
}

See: http://jsfiddle.net/zyZ7Z/