如何在HTML元素周围包装JavaScript对象？

Question

这是返回带有buttonClass类的span元素的JavaScript：

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

我想用HTML标记包装返回的JavaScript元素，如下所示：

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

我意识到我需要创建tr和td元素，然后将tr的子级设置为td ，但是如何将span设置为td的子级呢？

这是我到目前为止的内容：

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

但这不会让我做：

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

我应该怎么做呢？

Answer 1

像下面的示例一样选择元素，然后调用.wrap方法以添加包装它的元素。

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

您先前的尝试将不起作用，因为您尝试将jQuery对象附加到td 。 因此，如果您尝试下面的示例，它会起作用。 .get(0)返回jQuery对象中的第一个元素，该元素将是<span class="buttonClass"></span> ，并且是可以附加的有效节点。

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);