Appending element to the sibling

Question

how to append element into the closest on clicking "add-picture" button?

This is the html structure:

 <div class="step"
   <div class="step-wrapper>
     <div class="editor"></div>
   </div>

   <div class="delete-picture">
   <div class="add-picture">
 </div>

 <div class="step"
   <div class="step-wrapper>
     <div class="editor"></div>
   </div>

   <div class="delete-picture">
   <div class="add-picture">
 </div>

 <div class="step"
   <div class="step-wrapper>
     <div class="editor"></div>
   </div>

   <div class="delete-picture">
   <div class="add-picture">
 </div>

and here is my wrong jquery:

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).parent().find(".step-wrapper").after(imageField);   
});

after click .step should look like:

  <div class="step"
       <div class="step-wrapper>
          <img class="link" >
         <div class="editor"></div>
       </div>

       <div class="delete-picture">
       <div class="add-picture">
     </div>

Answer 1

I think you want .prepnd(), not .after() to make it the first child element.

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).parent().find(".step-wrapper").prepend(imageField);   
});

See the jQuery doc for .prepend().

Though this style of code works, you could also use .closest() for slightly more robust code:

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).closest(".step").find(".step-wrapper").prepend(imageField);   
});

Answer 2

Use prepend() instead of after():

$(this).parent().find(".step-wrapper").prepend(imageField);   

after() places the content as a sibling whereas prepend() makes it the first child element

Answer 3

Looks like you want to add the element before the .editor element, so try

$(document).on('click', '.add-picture', function() {
    var imageField = $('<img class="link" >');
    $(this).parent().find(".step-wrapper .editor").before(imageField);   
});

Demo: Fiddle

Answer 4

2 Working demo: http://jsfiddle.net/E78VA/1/ & http://jsfiddle.net/E78VA/

Also plz note your html DOM was not right and have few minor mistakes I have rectified ur HTML as well. i.e. missing end div etc. :)

APIs could be used are

• prependTo http://api.jquery.com/prependTo/
• prepend http://api.jquery.com/prepend/

Hope rest fits the cause :)

Code

$(document).on('click', '.add-picture', function () {
    var imageField = $('<img class="link" >');
    // $(this).parent().find(".step-wrapper").prepend(imageField); 
    $(imageField).prependTo($(this).parent().find(".step-wrapper"));
    alert($(this).parent().find(".step-wrapper").html());
});

HTML

<div class="step">
    <div class="step-wrapper">
        <div class="editor">test</div>
    </div>
    <div class="delete-picture">delete</div>
    <div class="add-picture">add</div>
</div>
<div class="step">
    <div class="step-wrapper">
        <div class="editor"></div>
    </div>
    <div class="delete-picture"></div>
    <div class="add-picture"></div>
</div>
<div class="step">
    <div class="step-wrapper">
        <div class="editor"></div>
    </div>
    <div class="delete-picture"></div>
    <div class="add-picture"></div>
</div>