CODEWITHSUNDEEP
javascripthtmlinnerhtmlappendchildcreateelement
user1769072
user1769072

Reputation: 53

Copy and inserting HTML elements into new pop-up block

I want to completely copy all elements 

<div id="articleFull"> ... </div>

(+ div inclusive) with their content in a new pop-up window 

<div id="newPopUp"> ... </div>

<div id="articleFull">
    <p>lorem ipsum</p>
    <img src="1.png" />
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <h3>Test title</h3>
    <img src="1.png" />
    <p>lorem ipsum</p>
</div>

I tried to do this simple method: http://jsfiddle.net/ApBSN/3/

articleFull = document.getElementById('articleFull');

function copyHtml(){
    div = document.createElement('div')
    div.id = 'newPopUp';
    document.body.appendChild(div);

    var t = document.getElementById('articleFull');
    div.appendChild(t);
}

It works... BUT the function does not copy the code, and moves it from one place to another, effectively removing it from its original location. I just want to duplicate the block. Yes, I understand that the page can not be 2 "ID", but with this, I'll take care of myself more.

Ideas?

Upvotes: 0

Views: 1648

Answers (2)

Scorpio
Scorpio

Reputation: 1171

you can try Clone if interested in Jquery...http://api.jquery.com/clone/ this will duplicate the html rather then replacing it as in case of append

i have updated your http://jsfiddle.net/ApBSN/9/ but now you need to work on css

var t1 = document.getElementById('newPopUp');

var t = document.getElementById('articleFull');

$(t).clone().appendTo(t1);

Upvotes: 3

TalesTk
TalesTk

Reputation: 181

If I understood correctly this should do it:

function copyHtml(){
    div = document.createElement('div')
    div.id = 'newPopUp';
    document.body.appendChild(div);

    var t = document.getElementById('articleFull');
    t.id = "articleFull2";
    div.appendChild(t);
}

Upvotes: 0

Related Questions