Is there any way in jquery to copy myself and all child elements.

Question

<ul class="swiper-wrapper">
    <li class="swiper-slide">
        <img src="./images/banner-1.jpg" alt="">
        <span class="slider-text"></span>
    </li>
    <li class="swiper-slide">
        <img src="./images/banner-2.jpg" alt="">
        <span class="slider-text"></span>
    </li>
    <li class="swiper-slide">
        <img src="./images/banner-3.jpg" alt="">
        <span class="slider-text"></span>
    </li>
    <li class="swiper-slide">
        <img src="./images/banner-4.jpg" alt="">
        <span class="slider-text"></span>
    </li>
</ul>

I want to copy the li tag itself including all sub-elements to the front of the first li tag. jquery has a simple way to write it.

var swiperPic = $(".swiper-slide")
var liHtml = swiperPic.eq(swiperPic.length - 1).html()
swiperPic.eq(0).before("<li class="swiper-slide">" +  liHtml +"<li>")

What I think of is to copy all the child elements under the li tag but not the li tag itself.

Answer 1

Try.clone().find(">*")

Answer 2

$(selector).children(selector) is used to return the child elements of each element in the matching element set.

Answer 3

Can’t just clone the whole thing$('.swiper-slide')

Answer 4

var swiperPic = $(".swiper-slide");
swiperPic.eq(0).before(wiperPic.eq(swiperPic.length - 1).children().clone());

Answer 5

For native js, just use element.cloneNode(true)

Answer 6

.clone