Question

我有一个带有各种表单元素的html：

 <div class="card border-bg-light mb-3" id="card_steps">
            <div class="card-header bg-transparent" id="card_header">
                <span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span>
                {{ form.non_field_errors }}
                <div class="fieldWrapper">
                    {{ form.step_description.errors }}
                    <label for="{{ form.step_description.id_for_label }}">Step:</label>
                    {{ form.step_description }}
                </div>
            </div>
            <div class="card-body" id="card_body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="fieldWrapper">
                        {{ form.can_edit_email.errors }}
                        <label for="{{ form.can_edit_email.id_for_label }}">Editable:</label>
                        {{ form.can_edit_email }}
                    </div>
                    <div class="fieldWrapper">
                        {{ form.step_notification_period.errors }}
                        <label for="{{ form.step_notification_period.id_for_label }}">Notify user before launch
                            date:</label>
                        {{ form.step_notification_period }}
                    </div>
                    <div class="fieldWrapper">
                        {{ form.step_attachment.errors }}
                        <label for="{{ form.step_attachment.id_for_label }}">Upload:</label>
                        {{ form.step_attachment }}
                    </div>
                </form>
            </div>
        </div>

在我的下一个卡片div中，我有一个链接Add Steps，单击该链接将创建一个与上面的div card_steps完全相同的div，它就位于card_steps的正下方div，那么我该如何在javascript中执行此操作？

<div class="card">
    <div class="card-body">
        <a href="#" class="card-link" id="add_step">+ Add Step</a>
    </div>
</div>

Answer 1

在HTML中的按钮上放置onclick：

onclick="createClone()"

然后设置一种在您的js中克隆div的方法：

function createClone() {
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
}

在this答案中找到。

Answer 2

您可以使用以下方法轻松复制div的内部内容：

document.getElementById("add_step").innerHTML

一旦有了，基本上就可以克隆该div的INNER内容。一切。如果需要div的外壳，则需要手动重新创建。例如，您可以这样做：

var x = document.getElementById("add_step"); // the clone's parent element.
var y = document.createElement("div"); // the clone's inner content
y.innerHTML = document.getElementById("card_steps").innerHTML;
x.appendChild(y);

在那里，您基本上只是克隆了div。

编辑：已编辑，以使用正确的元素ID名称更适合您的问题。

javascript-单击按钮时复制div

2 个答案: