2014-09-03 58 views
-1

我有两个HTML部门几乎相同。我需要在第一个div后添加第一个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'在你的代码。 – 2014-09-03 18:24:38

+2

我不记得我最后一次听到有人称'div为“divisions”:) – LcSalazar 2014-09-03 18:28:15

+0

这可以用jQuery在一行中完成,你有一个jQuery标记...你想要一个jQuery的答案? – 2014-09-03 18:36:24

回答

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放在所有东西之后。 – 2014-09-04 01:12:29