How can I clone a tag that have many other tags with Attributes?

Question

I have a form named 'myForm'. and I want to add a div tag has id defined 'original', every time I hit a button. Can anyone help me out to add the tags? The additional tags has to be after the original one, but still inside of myForm.

Should I use clone() function?? Plz somebody let me know.... Here are my codes....

<form name="myForm">
<div id="original" class="original">
    <div class="separator-2"></div>
    <div>
    <div class="form-group" >
        <input type="text" class="form-control" name="AAA" style="width:400px"/>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="BBB" style="width:400px">
    </div>
    </div><br>
</div>
</form>

<button id="myButton"/>

<script>
var form = document.getElementById('myForm');
document.getElementById('myButton').addEventListener('click', function(e) {
    form.appendChild(addAdditionalTags());
});

function addAdditionalTags() {
    //?????????? What should I write here???
}
</script>

Answer 1

You have to use Node.cloneNode() to clone the node, and then add it to the document by using Node.appendChild().

Warning: cloneNode() may lead to duplicate element IDs in a document.

If your element uses an ID, you should always change it to a unique ID, so you have to do with the name attribute in order to have it in forms' post/get data when you submit.

Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties. (e.g. node.onclick = fn) Moreover, for a element, the painted image is not copied.

For your example, you can do something like this to have the <div id="original-1" class="original"> cloned and inserted to the document form with a unique id and input names like this:

document.getElementById('cloneElement').addEventListener('click', function(e) {
    var form = document.getElementById('myForm');
    var formOriginals = form.getElementsByClassName('original');
    var cloned = formOriginals[0].cloneNode(true);
    var new_index = formOriginals.length + 1;
    cloned.id = 'original-' + new_index;
    cloned.getElementsByTagName('input')[0].name = 'field-' + new_index + 'a';
    cloned.getElementsByTagName('input')[1].name = 'field-' + new_index + 'b';
    form.appendChild(cloned);
});

<form name="myForm" id="myForm">
  <div id="original-1" class="original">
    <div class="separator"></div>
    <div class="groups">
      <div class="form-group" >
        <input type="text" class="form-control" name="field-1a" style="width:400px"/>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" name="field-1b" style="width:400px">
      </div>
    </div><br>
  </div>
</form>

<button id="cloneElement">Clone Form Element</button>

This will result having an html dom tree like this and it will clone <div id="original-1" class="original"> element each time we hit the clone button:

<form name="myForm" id="myForm">
    <div id="original-1" class="original">
        <div class="separator"></div>
        <div class="groups">
            <div class="form-group">
                <input type="text" class="form-control" name="field-1a" style="width:400px">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="field-1b" style="width:400px">
            </div>
        </div><br>
    </div>
    <div id="original-2" class="original">
        <div class="separator"></div>
        <div class="groups">
            <div class="form-group">
                <input type="text" class="form-control" name="field-2a" style="width:400px">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="field-2b" style="width:400px">
            </div>
        </div><br>
    </div>
</form>