在开发元素被确认后，在开发元素下方保留一个单击按钮

Keeping a click button underneath a dev element after it is cereated

本文关键字：元素 开发 一个 按钮 单击 保留 方保留 确认      更新时间：2023-09-26

我设置了一个添加按钮，以便在单击页面时将另一个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>

没有jQuery你可以使用insert之前像这样 

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/

相关文章：