javascript - replicate a div on button click

Question

I have a html with various form elements:

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

In my next card div i have a link Add Steps which upon clicking will create a div which is exactly the same as the div card_steps above and it will be right below the card_steps div, so how do i go about doing this in javascript?

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

Search the web: "how to clone a node with javascript" – KooiInc Jul 28 '18 at 08:32 — KooiInc, Jul 28 '18 at 08:32

score 1 · Answer 1 · answered Jul 28 '18 at 08:52

Put an onclick on your button in your html:

onclick="createClone()"

then set a method to clone a div in your js:

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);
}

found at this answer.

score 0 · Answer 2 · answered Jul 28 '18 at 08:54

You can copy a div's INNER contents quite easily using:

document.getElementById("add_step").innerHTML

Once you have that, you essentially just cloned the INNER contents of that div. Everything. If you want the shell of the div, you will need to recreate it manually. For example, you could do this:

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

There, you have essentially just cloned your div.

EDIT: Edited to better suit your question with correct element ID names.

javascript - replicate a div on button click

2 Answers2