javascript - 如何将 JavaScript 对象包裹在 HTML 元素周围？

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