How to set the added elements by jQuery to the behind of other element


Tags: javascript,jquery,html,css

Problem :

I am making a play list based on SoundCloud API. I have a list that when an li is pressed a new div element will be added to the content of the li. I use append() methond to do so, and it works but it adds the div element to to front, so the text that already existed in the element goes behing. How can I change it? My CSS code:

.list > li {
    background:#eee;
    display:block;
    position: relative;
    background:;
    padding:10px;
    box-shadow: inset 0 1px 0 #fff;
}
.currentSong {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
}
.currentSongLoad {
    background:black;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
}

HTML:

<li>
    <h3 class="name">Jonny Stromberg</h3>
    <p class="release">1986</p>
</li>

jQuery:

$(".list li").click(function () {
    $(this).append("<div class=\"currentSong\"><div class=\"currentSongLoad\"></div></div>");

    SC.get("/tracks/155552335", function (tracks) {
        trackWaveform = tracks.waveform_url;
        $(".name").text(tracks.title);
        $(".release").text(tracks.release_year);
        $(".currentSong").css({
            background: "url(" + trackWaveform + ") top center no-repeat red",
            "background-size": "100% 100%",
            width: "100%",
            height: "100%",
            left: "0"
        });
        console.log(trackWaveform);
    });

    SC.stream("/tracks/155552335", function (sound) {
        sound.play({
            whileplaying: function () {
                $(".currentSongLoad").css('width', ((sound.position / sound.duration) * 100) + '%');
            },
        });
    });
});

http://jsfiddle.net/danials/6Djwd/8/

Any idea to put the .currentSong at the back of the other elements (h3 and p)?



Solution :

Boom Your Problem Solved: h3-p-tags-behind-song-layer

css


.list {
    font-family:sans-serif;
    margin:0;
    padding:20px 0 0;
}
.list > li {
    height:50px;
    background:#eee;
    display:block;
    position: relative;
    background:;
    padding:10px;
    box-shadow: inset 0 1px 0 #fff;
}
.currentSong {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
}
.currentSongLoad {
    background:black;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
}
h3 {
    position:absolute;
    color:#fff;
    font-size: 16px;
    margin:0 0 0.3rem;
    font-weight: normal;
    font-weight:bold;
    z-index:999999;
    height:10px;
}
p {
    position:absolute;
    color:#fff;
    margin:0;
    z-index:999999;
    margin-top:25px;
}

    CSS Howto..

    How to link after the CSS-Animation?

    How do I change linked stylesheets?

    How to work with Action Link when using CSS

    How to position children with respect to parent in CSS?

    How can I determine the background image URL of a div via JavaScript?

    With css, how to ensure wrap on span boundary?

    Stop CSS & Jquery Slideshow from looping

    How can I force my table width into the width of my container?

    how to append an icon to an input search?

    save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory [duplicate]

    How to float images left and right without text wraps

    How to slowly move header while user scrolls the page?

    How to make xsl show only images/captions from xml

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    how to position radio button outside of a block with css

    how to change the CSS background-image of a class-pseudoelement by Javascript only?

    How to avoid loading CSS file for ipad sized devices ('between' mobile and full-sized)?

    How to add a 3rd level to my CSS drop down menu?

    how to change single li element in a menu using lists?

    How can I align two different-size pieces of text to the left and right while matching baselines?

    How to get the root directory of wordpress in css

    How to set z-index in css?

    How to have different layout orders for same html code for desktop and desktop using css or javascript (not jquery)

    How to draw a half circle (border, outline only) [closed]

    How to place kartik typeahead above text input

    How to set a default location of a scrollbar

    How to make an infinite horizontal container with fixed height

    how to add css code on jquery?

    How to highlight selected tab in Web Forms including Master Page

    how to show different image in div per the screen size?