javascript - 单击按钮时复制 div

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 中，我有一个链接添加步骤，单击该链接将创建一个与上面的 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回答。