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

Posted 2023-05-07

【中文标题】将 HTML 元素复制并插入到新的弹出块中

【英文标题】：Copy and inserting HTML elements into new pop-up block

【发布时间】：2012-11-03 06:04:40

【问题描述】：

我想完全复制所有元素

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

(+ div inclusive) 在新的弹出窗口中显示其内容

<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”，但是有了这个，我会更加照顾自己。

想法？

【参考方案1】：

如果对 Jquery 感兴趣，可以尝试 Clone...http://api.jquery.com/clone/ 这将复制 html，而不是像 append 一样替换它

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

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

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

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

【讨论】：

感谢您的回复。但我仍然非常不了解使用框架的 javascript。为了更好地理解语言原理，我需要纯 js 中的示例

是的，您完全理解我想要的 - 感谢您的实施。但它使用 jQuery，所以我将尝试使用纯 js 搜索主题 jquery-clone。感谢您的提示！

【参考方案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);

【讨论】：

我只想在“newPopUp”中复制整个 div = “articleFull”。如果你看这里jsfiddle.net/ApBSN/3，我们会看到当我们按下按钮时 - 第一个“articleFull”被删除，只有父 。但我需要他留在“otherDiv”，但它的副本也出现在新的弹出窗口 - “newPopUp”