I want to add a div element at the top inside another div element.

<div class="chat-box" id="chat-box">
    <div class="item">
        <img src="avatar.png"/>
        <p class="message">
        <a href="#" class="name"><small class="text-muted pull-right"><i class="fa fa-clock-o">Date</i></small></a>
        Message
        </p>
    </div>
</div>

I need to add new "item" divs above the ones that are already there. Is there any jquery or javascript snipped that does this for me?

Thanks for the help! :)

I want to add a div element at the top inside another div element.

<div class="chat-box" id="chat-box">
    <div class="item">
        <img src="avatar.png"/>
        <p class="message">
        <a href="#" class="name"><small class="text-muted pull-right"><i class="fa fa-clock-o">Date</i></small></a>
        Message
        </p>
    </div>
</div>

I need to add new "item" divs above the ones that are already there. Is there any jquery or javascript snipped that does this for me?

Thanks for the help! :)

• javascript
• jquery
• html

• .prepend() – Patrik Krehák Commented Mar 16, 2014 at 13:53

2 Answers 2

.append() will append it at the end of #chat-box.

.prepend() will pre-pend it, at the beginning of it, like what you're trying to achive.

var new_item_html = "<div class='item'>i am an item</div>"
$("#chat-box").prepend(new_item_html);

hope that helps.

In general the div's display is in their order. Any additional div will be the last on top. Use in the div's style position:absolute