2014-09-03 4 views
-1

У меня есть два раздела HTML почти одинаково. Мне нужно добавить клон моего первого div после оригинала, но до второго div.Создание клонов разделов HTML

Это код, который я пробовал.

<body> 


     <div id="2ndPayDiv"> 
      <label id="2ndPayLbl">Payment No 2: </label> 
      <input type="text" /> 
      <input type="text" /> 
     </div> 

     <div id ="totPayForm" > 
      <label id="2ndPayLbl">Total Payment: </label> 
      <input type="text" /> 
      <input type="text" /> 
      <input type="submit" value="Add new one" onclick="addNewField();return false;"> 
     </div> 

     <script> 
      var i=3; 
      function addNewField() { 

       var myDiv = document.getElementById("2ndPayDiv"); 
       var divClone = myDiv.cloneNode(true); // the true is for deep cloning 

       var totDiv = document.getElementById("totPayForm"); 
       var parentDiv = totDiv.parentNode; 
       parentDiv.insertBefore(divClone, totDiv); 

       document.getElementById('2ndPayLbl').innerHTML = 'Payment No '+i++ +':'; 

      } 
     </script> 


    </body> 

мой первый div - 2ndPayDiv. Мне нужно иметь клон этого после него, но перед div totPayForm каждый раз, когда я нажимаю кнопку. Но он ведет себя неожиданно. Он создает клон и помещает его перед всем. Как решить эту проблему

+0

помеченных как 'jquery' но нет никакого' jquery' в вашем коде. –

+2

Я не помню, как в последний раз, когда я слышал, что кто-то звонил в div, как «деления» :) – LcSalazar

+0

это можно сделать в одной строке с помощью jQuery, у вас есть тег jQuery ... вы хотели получить ответ jquery? ? –

ответ

0

Почему бы вам не обернуть 2ndPayDiv внутри div и использовать appendChild?

<div> 
     <div id="2ndPayDiv"> 
      <label id="2ndPayLbl">Payment No 2: </label> 
      <input type="text" /> 
      <input type="text" /> 
     </div> 
    <div> 

JS:

 function addNewField() { 

      var myDiv = document.getElementById("2ndPayDiv"); 
      var divClone = myDiv.cloneNode(true); // the true is for deep cloning 

      var parentDiv = myDiv.parentNode; 
      parentDiv.appendChild(divClone); 

      document.getElementById('2ndPayLbl').innerHTML = 'Payment No '+i++ +':'; 

     } 
+0

Это тоже не работает. Недавно созданный div помещается перед всем, а второй последний div идет за всем. –

Смежные вопросы