Question

I have a pdf link with the filesize as follows…

<a class="pdf-link" href="some-pdf.pdf">Some PDF</a> <span class="filesize">(PDF 100kb)</span>

The link is generated by our CMS and for our mobile site the span needs to sit within the link.

Would anyone know of a way to move the closing </a> tag to the end of the span, preferably with jQuery?

<a class="pdf-link" href="some-pdf.pdf">Some PDF <span class="filesize">(PDF 100kb)</span></a>

Any help would be much appreciated.

Answer 1

Try:

$('.filesize').each(function() {
   $(this).appendTo($(this).prev());
});

You don’t need to manually remove the content, as appendTo moves your DOM internally, from the docs:

We can also select an element on the page and insert it into another:

$(‘h2’).appendTo($(‘.container’));

If an element selected this way is inserted elsewhere, it will be
moved into the target (not cloned):