Question

以下是返回span类的buttonClass元素的JavaScript：

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

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

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

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

这是我到目前为止所拥有的：

td

但是它不允许我这样做：

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

我应该怎么做？

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

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

2 个答案: