How do I wrap a JavaScript object around HTML elements?

Question

Here is the JavaScript that returns a span element with the buttonClass class:

$(this).find('span.buttonClass').sort()

I would like to wrap the returned JavaScript element with HTML tags like so:

<tr>
    <td>
        <span class="buttonClass"></span>
    </td>
</tr>

I realize that I need to create the tr and td elements and then set tr 's child to be td , but how do I set span to be the child of td ?

Here is what I have so far:

var tr = document.createElement("TR");
var td = document.createElement("TD");
tr.appendChild(td);

But it won't let me do:

td.appendChild($(this).find('span.buttonClass').sort())

What should I be doing instead?

Answer 1

Select the element like the example below and call the .wrap method to add elements wrapping it.

$('span.buttonClass').wrap('<tr><td></td></tr>');

Your previous attempt would not work because you tried to append a jQuery object to the td . So it would have worked if you tried the example below. .get(0) returns the first element in the jQuery object which would be <span class="buttonClass"></span> and that is a node valid to append.

td.appendChild($('span.buttonClass').get(0));

Answer 2

 const elementTarget = document.querySelector('body'); let newTags = []; newTags += '<tr><td><span class="buttonClass"></span></td></tr>'; elementTarget.insertAdjacentHTML('afterend', newTags);