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

1 回答 1

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/

于 2013-11-01T18:24:58.200 回答