如何克隆具有许多属性的其他标记的标记？

Question

我有一个表格叫“myForm”。我想要添加一个div标签，在每次我按下一个按钮时，它都定义为‘原始’。有人能帮我把标签加进去吗？附加标记必须在原始标记之后，但仍然在myForm中。

我应该使用克隆()函数吗？请有人告诉我..。这是我的密码..。

<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()将其添加到文档中。

警告：cloneNode()可能导致文档中的重复元素ID。

如果您的元素使用ID，则应该始终将其更改为唯一的ID，因此您必须使用name属性，以便在提交时将其保存在窗体的post/get数据中。

克隆节点复制其所有属性及其值，包括内部(内联)侦听器.它不复制使用addEventListener()添加的事件侦听器或分配给元素属性的事件侦听器。(例如，node.onclick = fn)此外，对于一个元素，绘制的图像不会被复制。

对于您的示例，您可以这样做，以便将<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>