I have a set of several images, I want to use append, but I'm not getting
<a href="image1.jpg" data-slb-active="1" data-slb-asset="1947037253" data-slb-internal="0"
data-slb-group="slb">
<img class="alignnone size-medium wp-image-527" src="image1.jpg" alt=""
width="300" height="225" srcset="image1.jpg" sizes="(max-width: 300px) 100vw,
300px">
</a>
<a href="image2.jpg" data-slb-active="1" data-slb-asset="1947037253"
data-slb-internal="0" data-slb-group="slb">
<img class="alignnone size-medium wp-image-527" src="image2.jpg" alt=""
width="300" height="225" srcset="image2.jpg" sizes="(max-width: 300px) 100vw,
300px">
</a>
<a href="image3.jpg" data-slb-active="1" data-slb-asset="1947037253"
data-slb-internal="0" data-slb-group="slb">
<img class="alignnone size-medium wp-image-527" src="image3.jpg" alt=""
width="300" height="225" srcset="image3.jpg" sizes="(max-width: 300px) 100vw,
300px">
</a>
<div class="images"></div>
this code works
$('.size-medium').appendTo('.images');
but within the div images only the images appear, the <a>
links do not appear
I tried the code below and several other attempts but did not get the result
$('a data-slb-group').appendTo('.images');
Thanks
This isn't a correct selector because you're looking for a tag called <a data-slb-group>
$('a data-slb-group').appendTo('.images');
You can access to atributes by using attr function $(element).attr('atributeName')
Here the solution:
You could do that by capsuling all you want to take into a div like:
<div id='capsule'>
<a href="image1.jpg" data-slb-active="1" data-slb-asset="1947037253" data-slb-internal="0"
data-slb-group="slb">
<img class="alignnone size-medium wp-image-527" src="image1.jpg" alt=""
width="300" height="225" srcset="image1.jpg" sizes="(max-width: 300px) 100vw,
300px">
</a>
<a href="image2.jpg" data-slb-active="1" data-slb-asset="1947037253"
data-slb-internal="0" data-slb-group="slb">
<img class="alignnone size-medium wp-image-527" src="image2.jpg" alt=""
width="300" height="225" srcset="image2.jpg" sizes="(max-width: 300px) 100vw,
300px">
</a>
<a href="image3.jpg" data-slb-active="1" data-slb-asset="1947037253"
data-slb-internal="0" data-slb-group="slb">
<img class="alignnone size-medium wp-image-527" src="image3.jpg" alt=""
width="300" height="225" srcset="image3.jpg" sizes="(max-width: 300px) 100vw,
300px">
</a>
</div>
<div class="images"></div>
And then just use something like this:
var html = document.getElementById('capsule').innerHTML;
document.getElementsByClassName('images')[0].insertAdjacentHTML('afterbegin', html);
innerHTML
select all the HTML inside that div. There is a JQuery function called html() that do exactly the same thing: