javascript - 将 HTML 元素复制并插入到新的弹出块中

Question

我想完全复制所有元素

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

（+ div 包括）在新的弹出窗口中显示其内容

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

我试着做这个简单的方法：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);
} 

它可以工作...但是该函数不会复制代码，而是将其从一个地方移动到另一个地方，从而有效地将其从原始位置删除。我只想复制块。是的，我知道页面不能是 2 个“ID”，但是有了这个，我会更加照顾自己。

想法？

Answer 1

如果对 Jquery 感兴趣，您可以尝试 Clone ... http://api.jquery.com/clone/这将复制 html 而不是在追加的情况下替换它

我已经更新了你的http://jsfiddle.net/ApBSN/9/​​但现在你需要处理 css

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

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

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

Answer 2

如果我理解正确，应该这样做：

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

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