Question

Using the following code:

<script type="text/javascript">
function moveFront(el){
    var me = $('#'+el.closest('div').attr('id'));
    var parent = me.parent();
    parent.find('div:first').prepend(me);
    //?
}
</script>
<div class="comments">
<div id="105">
    105
    <p>...</p>
    <form>...</form>

    <div id="116">
        116
    </div>
    <div id="106">
        106
    </div>
    <div id="109">
        109
        <button onclick="moveFront($(this));"></button>
    </div>
</div>
</div>

1. I would like to append a new div element in the element with the ID of 105, however, I don’t want it at the end or the start. It should be before the other div elements.

2. If a button was used, as demonstrated in the div element with the ID of 109, how would I move it as the first div element with the ID of 105?

Answer 1

You can use the before method:

Insert content, specified by the parameter, before each element in the set of matched elements.

$('#105 div:first').before('<div id="115"></div>')
$('#109').appendTo($('#105 div:first'))

Fiddle

Note that IDs must be unique and if the doctype of the page is not HTML5, IDs must begin with a letter.

---

If you want to move the button’s div parent to the first div you can try:

function moveFront(el){
     el.closest('div').prependTo($('#105 div:first'))
}

Fiddle