用所有元素克隆 <div>答案

【问题标题】：Clone <div> with all elements用所有元素克隆 <div>
【发布时间】：2018-07-03 09:58:04
【问题描述】：

我有这个 div（代表一个外景室）：

<div class="card transition">
    <h2 class="transition1"></h2>
    <p class="hovering"></p>
    <div class="cta-container transition"><a href="#" class="cta">Open room</a></div>
    <div class="card_circle transition"></div>
</div>

此外，我正在执行 AJAX 请求以获取位置房间的数量。例如，如果我有 9 个位置房间，我想为每个房间动态生成 9 个 div，包含与上面的 div 相同的元素。

到目前为止，我已经尝试过（使用“添加”按钮）来查看是否可以克隆 div，但没有成功：

$(function () {
    $("#add").click(function () {
        div = document.createElement('div');
        $(div).addClass("cta-container transition").html($('.cta-container transition').clone());
        $(".card transition").append(div);
    });
});

【问题讨论】：

$('.cta-container transition') 这应该是$('.cta-container.transition')
您的逻辑看起来不错（尽管您可以只使用$('<div />').addClass(... 而不是document.createElement()），我猜问题出在您的最后一个选择器中：$("#card transition")。没有 <transition> 元素 - 我想你缺少 # 或 . 前缀
只需使用.html() 而不是.clone()
um native javascript's node.cloneNode(true) 可以深度克隆一个节点，我在这里缺少什么？

标签： javascript jquery html clone

【解决方案1】：

以下是如何在本机中克隆 div 及其整个子项：

var myDiv=document.getElmentById("myDiv").cloneNode(true);

那么你可以这样做：

yourElement.appendChild(myDiv);

【讨论】：