jQuery move node out of its parent

Question

I have this code:

<ul class="list">
  <li>
    <a href="#" >
      <img src="IMAGE" />
      SOME TEXT
    </a>
  </li>
  <li>
    <a href="#" >
      <img src="ANOTHER IMAGE" />
      SOME DIFFERENT TEXT
    </a>
  </li>
</ul>

I want the images prepended to the parent node like this:

<ul class="list">
  <li>
    <img src="IMAGE" />
    <a href="#" >
      SOME TEXT
    </a>
  </li>
  <li>
    <img src="ANOTHER IMAGE" />
    <a href="#" >
      SOME DIFFERENT TEXT
    </a>
  </li>
</ul>

Obscurant

any particular event should be triggered when the append happens? ... have you already attempted any JS code? – Buhler

Not sure what you are wanting to do... Are you adding the img tags with jQuery after the rest of the code shown in your example is already in the DOM? – Actiniform

How this image will come ? Some kind of trigger/ajax ? – Ser

there is no trigger needed, when the dom is ready it should be detached and append immediately after the li tag like in my example,.. and yes i already tried some code but its a little bit complicated so ive choosen this simple code example – Comic

Well in that case the answer @Alnitak has given you should be perfect. – Actiniform

totally agree with ElGabbu please try first Google then post your question and make your questions clear – Ilana

@user64837 sorry 'bout that but dont you think that even more examples in web help more people in future? – Comic

@Obscurant don't worry about them, I doubt it would be at all easy to find the answer you needed on Google. – Greave

sorry if you got offended dear...meant just try before you post!! – Ilana

Answer 1

Try this:

$('.list > li > a > img').each(function() {
    $(this).insertBefore($(this).parent());
})

Demo at http://jsfiddle.net/alnitak/3nEVz/

EDIT I came up with a cleaner version:

$('.list > li > a > img').each(function() {
    $(this).parent().before(this);
})

Greave

yeah, I just revised to change that while you were commenting – Greave

nb: I've gone this route rather than simply prepend to the <li> since it explicitly moves the "img" before the "a", regardless of any other elements that might be present. – Greave

oh GREAT,.. it works perfectly even in my complicated case :) BIIIG thanks :) – Comic

@Alnitak: Good point and worthwhile clarification. Depends whether the OP's objective is to keep the img with the a or have it as the first element in the li. – Magnetoelectricity

@Luke well the title was "append to parent", so I figured keeping it with the a was the right thing to do. – Greave

Answer 2

$('ul.list img').each(function(_, elem) {
    var $elem = $(elem);
    $elem.prependTo( $elem.closest('li') );
});

demo: http://jsfiddle.net/hPbZD/1/

Dray

Answer 3

Try this:

$(function() {
    $('ul.list > li > a > img').each(function() {
      $(this).closest('li').prepend(this);
    });
});

See it in action here.

Magnetoelectricity