Question

我有一个名为＆＃39; myForm＆＃39;的表单。我想添加一个div标签已经定义了＆＃39;原始＆＃39;，每次按下按钮。任何人都可以帮我添加标签吗？附加标签必须在原始标签之后，但仍在myForm内部。

我应该使用clone（）函数吗？ Plz有人让我知道....这是我的代码......

<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数据中。< / p>

克隆节点会复制其所有属性及其值，包括内在（内联）听众。它不会复制事件使用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>

如何克隆具有许多其他标签的标签？

1 个答案: