2013-11-01 52 views
0

我已經設置了一個添加按鈕,可以在點擊時在頁面上添加另一個div元素。我遇到問題,在創建div之後,讓按鈕放在新的div元素下面。按鈕保持原狀,點擊時添加新的div,如果再次點擊,按鈕仍然保持在同一個位置,並添加一個額外的div。任何幫助是極大的讚賞。在點擊後在開發元素下面保留點擊按鈕

  <fieldset id="college"> 
      <legend id="namefields"><h2>College, University or Professional School</h2></legend> 
      <table width="834"> 
       <tr> 
        <td width="439" height="61"> 
         Name of School <input type="text"size="40" maxlength="50" name="college" id="college"/> 
        </td> 
        <td width="383"> 
         Location <input type="text" name="location" size="40"> 
        </td> 
       </tr> 
      </table> 
      <table width="834"> 
       <tr> 
        <td width="272" height="54"> 
         Start Date <input type="date" name="date" size="10"></td> 
        <td width="273" height="54"> 
         End Date <input type="date" name="date" size="10"></td> 
        <td width="273" height="54"> 
         Credit Hours <input type="text" name="creditHrs" size="10"></td> 
       </tr> 
      </table> 
      <table width="869"> 
       <tr> 
        <td width="439" height="61"> 
         Course of Study <input type="text"size="40" maxlength="50" name="college" id="college"/> 
        </td> 
        <td width="418"> 
         <label for="degreeType" id="degreeType">Degree Earned (transcripts may be required)</label> 
          <select style="width: 310px;" id="degreeType" name="degreeType" tabindex="0"> 
          <option value="select one">Select One</option> 
          <option value="associates">Associates</option> 
          <option value="bachelors">Bachelors</option> 
          <option value="certification">Certification</option> 
          <option value="masters">Masters</option> 
          <option value="doctorate">Doctorate</option> 
          <option value="inprogress"> In Progress</option> 
          <option value="0">Not Applicable</option> 
          </select> 
        </td> 
       </tr> 
      </table>    
     </fieldset> 
     <button id= "addSchool" onclick="addSchool()">Add another school</button> 
      <script> 

      var original = document.getElementById('college'); 

      function addSchool() 
      { 
       var clone = original.cloneNode(true); 
       original.parentNode.appendChild(clone); 
      } 
      </script> 
    </fieldset> 
    </div> 

回答

0

沒有jQuery的你可以使用的insertBefore這樣

var original = document.getElementById('college'); 
var button = document.getElementById('addSchool'); 
function addSchool(){ 
    var clone = original.cloneNode(true); 
    original.parentNode.insertBefore(clone,button); 
}  

http://jsfiddle.net/Zg2cE/

+0

謝謝你的幫助。我會盡快檢查出來。 – user2571100