2016-11-21 70 views
3

我有一个名为'myForm'的表单。并且我想添加一个div标签,id为'original',每次我点击一个按钮。 任何人都可以帮我添加标签吗? 附加标签必须在原始标签之后,但仍在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> 
+0

试试这个, $('myForm')。append($('#original')。clone()); 我很担心,如果ID =“原始”被复制到克隆元素,这将是很好的,如果该ID不需要为DIV避免它。 –

回答

1

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

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

如果你的元素使用一个ID,你应该总是将其更改为一个唯一的ID,所以你必须与name属性做才能拥有它的形式后/获取数据时,提交。

克隆节点复制其所有属性及其值, 包括内部(内嵌)侦听器。它不会复制使用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>