javascript - 如何获取克隆元素并在附加之前添加 div 标签

Question

我使用 queryselectorall 从 iframe html 获取克隆元素，并将其附加到另一个元素。我想在附加之前为每个查询选择器元素添加周围的 div 标签。

现在我有这样的输出

    <div class="optedit_summary" id="opteditsum">
    <span id="pc1430568488933" class="optbold">nde</span>
    <span id="pc1430568582173" class="optdel">fas</span>
    <span id="pc1430914284123" class="optdel">non</span>
    </div>

需要如下

    <div class="optedit_summary" id="opteditsum">
    <div><span id="pc1430568488933" class="optbold">nde</span></div>
    <div><span id="pc1430568582173" class="optdel">fas</span></div>
    <div><span id="pc1430914284123" class="optdel">non</span></div>
    </div>

这是我的克隆和追加元素的代码

    var elements = document.getElementById('main_iframe').contentDocument.querySelectorAll(".optdel, .optbold");
    var editsummary = document.getElementById("opteditsum");

    for (var i = 0, im = elements.length; im > i; i++) {
        editsummary.appendChild(elements[i].cloneNode(true));
    }

Answer 1

由于您的解决方案不使用 jQuery，因此您可以创建一个 div 元素，然后将克隆附加到该元素，例如

var elements = document.getElementById('main_iframe').contentDocument.querySelectorAll(".optdel, .optbold");
var editsummary = document.getElementById("opteditsum");

var div;
for (var i = 0, im = elements.length; im > i; i++) {
    div = document.createElement('div');
    div.appendChild(elements[i].cloneNode(true))
    editsummary.appendChild(div);
}

<小时/>

使用 jQuery，整个代码可以如此简单

var $els = $('#main_iframe').contents().find('.optdel, .optbold');
$els.clone().wrap('<div />').parent().appendTo('#opteditsum');