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

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

1 个答案: