current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

I get the clone elements from iframe html using queryselectorall and also append to another element. I want to add surounding div tag for each query selector element before appending.

Now i have output like this

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

Need as like below

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

This is my code for cloning and append element

    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));
    }
share|improve this question
    
Your ouput and expected as same what the diffrences here? – JqueryKing May 9 '15 at 7:59
    
div tag added on each span – Smila May 9 '15 at 8:00
up vote 1 down vote

Since your solution does not use jQuery, you can create a div element then append the clone to that element like

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

Using jQuery the entire code can be as simple as

var $els = $('#main_iframe').contents().find('.optdel, .optbold');
$els.clone().wrap('<div />').parent().appendTo('#opteditsum');
share|improve this answer
    
how to make empty tag at before appending in '#opteditsum' – Smila May 9 '15 at 8:32
    
@kaliaperumal.p what do you mean by empty tag... where do you want to create it – Arun P Johny May 9 '15 at 8:33
    
No, Before append the clone element, i want to make empty tag(#opteditsum) for each click. – Smila May 9 '15 at 9:11
    
Thanks i got@Arun $('#opteditsum').empty(); var $els = $('#main_iframe').contents().find('.optdel, .optbold'); $els.clone().wrap('<div />').parent().appendTo('#opteditsum'); – Smila May 9 '15 at 9:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.