jQuery在页面加载时克隆div的内容

Question

I would like to clone an element inside a div and append it to another div without any click event, on page load. This is my code:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="hs-search-results__listing"> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> </ul> <script> $('.hs-search-results__listing li').each(function(){ $(this).find('.hs-search-results__title').clone().appendTo(".more-link-container"); }); </script> 

I am trying the above but it is not working.

Answer 1

In each iteration you are appending to all the elements with class more-link-container available in the DOM. You should append the element only to the relevant p element.

Change

.appendTo(".more-link-container")

To

.appendTo($(this).find(".more-link-container"))

 $('.hs-search-results__listing li').each(function(){ $(this).find('.hs-search-results__title').clone().appendTo($(this).find(".more-link-container")); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="hs-search-results__listing"> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> <li> <a href="#" class="hs-search-results__title">Search Title</a> <p class="more-link-container"> &nbsp; </p> </li> </ul>