Question

I want to spawn three random colored div boxes behind each list element. I started with this, however it doesn’t work – DIVs don’t appear to be visible 🙁

http://jsfiddle.net/dgweu/1/

Help much appreciated!

HTML

<div id="wrapper">
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</div>​

JS

$("li").each(function(){
    var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
        for (var i = 0; i < 3; i++) {
            stripe = document.createElement('div');
            stripe.setAttribute('style', 'width:100px; height:3px; background-color' + randomColor);  
            wrapper = document.getElementById("wrapper");
            wrapper.appendChild(stripe);
        }
});

Answer 1

The divs aren’t visible because there’s a syntax error in your CSS. You’re missing a : after background-color.

To make the divs appear behind the lis, you could position the divs absolutely and the lis relatively.

Have a look at this DEMO. I’ve also tidied up your JS.