javascript - 我怎样才能克隆一个标签，该标签有许多其他带有属性的标签？

Question

我有一个名为“myForm”的表单。每次我点击一个按钮时，我都想添加一个 div 标签，其 id 定义为“原始”。谁能帮我添加标签？附加标签必须在原始标签之后，但仍在 myForm 内。

我应该使用 clone() 函数吗？请有人告诉我....这是我的代码....

<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

你必须使用 Node.cloneNode() 克隆节点，然后使用 Node.appendChild() 将其添加到文档中.

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

如果您的元素使用 ID，您应该始终将其更改为唯一 ID，因此您必须处理 name属性，以便在您提交时将其包含在表单的发布/获取数据中。

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.

对于您的示例，您可以执行类似的操作以获得 <div id="original-1" class="original">克隆并插入到具有唯一 ID 和输入名称的文档表单中，如下所示:

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>

这将产生一个像这样的 html dom 树，它会克隆 <div id="original-1" class="original">每次我们点击克隆按钮时的元素:

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