How change img src in cloned div?

Question

I have a main div with another div and img like this

 $(".source_next_box") .clone() .removeClass('source_next_box') .find('img') .attr('src', data.url) .insertAfter(".next_box:last"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="next_box"></div> <div class="col-lg-6 col-xl-4 source_next_box"> <div class="card"> <img class="card-img-top preview-img" src="img/preview.png"> <div class="card-body pos-relative"> <h6 class="card-title mb-3">Title</h6> </div> <div> <button type="button" class="btn btn-link remove-files" data-id="77"></button> </div> </div> </div> 

I need clone this div with class source_next_box and put into next_box but with remove next_box class, and change src to show image and change data-id in button.

but on result i have

<div class="next_box"></div>
<img src="new_img_link>

What i need to?

Answer 1

As you are using chaining when you perform .find('img').attr() you are refering to <IMG> element, hence it is getting appended to DOM.

You need to use .end()

End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

$(".source_next_box")
    .clone()
    .removeClass('source_next_box')
    .find('img')
    .attr('src', data.url)
    .end() //<============
    .insertAfter(".next_box:last");

 $(".source_next_box") .clone() .removeClass('source_next_box') .find('img') .attr('src', "https://www.gravatar.com/avatar/64272f530b4465cf2c8821156ddab99c?s=32&d=identicon&r=PG&f=1") .end() .insertAfter(".next_box:last"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="next_box"></div> <div class="col-lg-6 col-xl-4 source_next_box"> <div class="card"> <img class="card-img-top preview-img" src="https://www.gravatar.com/avatar/64272f530b4465cf2c8821156ddab99c?s=32&d=identicon&r=PG&f=1"> <div class="card-body pos-relative"> <h6 class="card-title mb-3">Title</h6> </div> <div> <button type="button" class="btn btn-link remove-files" data-id="77">button</button> </div> </div> </div>