他の多くのタグを持つタグを属性でクローンするにはどうすればよいですか？

Question

私は 'myForm'という名前のフォームを持っています。私はボタンを押すたびにdivタグにidを 'original'と定義して追加したい。 誰かがタグを追加する手助けはできますか？ 追加のタグは元のタグの後ろにある必要がありますが、依然としてmyFormの内側になければなりません。

私はclone（）関数を使うべきですか？ Plzを誰かがここに....私に知らせて、私のコードは、あなたがノードのクローンを作成するためにNode.cloneNode()を使用して、Node.appendChild()を使用してドキュメントに追加する必要があり

<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

....です。

警告：cloneNode()は、ドキュメント内で重複する要素IDにつながる可能性があります。

あなたの要素はIDを使用している場合は、あなたが提出したときにフォームポスト/取得データでそれを持っているために、name属性に関係していますので、あなたは常に、ユニークなIDに変更する必要があります。真性（インライン）のリスナーを含むその属性とその値のノードのコピーすべて、 クローニング

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