javascript - 如何在按钮单击 html 和 jquery 时在 <form> 中添加 <div>

Question

每当单击“+”按钮 [addMore() 函数] 时，我都想添加以下 div 结构。虽然我可以添加 div 结构，但与硬编码相比，输入文本的对齐方式并不相同。

html文件:

<form class="align-center">
            <p class="6u 12u$(medium)">
                    Start Date: <input type="date" name="startdate" id="startdate" /> 
                    End Date: <input type="date" name="enddate" id="enddate" />
            </p>
            <p>
               <div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
            </p>
            <p>
                <div class="row">
                        <div class="3u 12u$(medium)">
                            <div class="select-wrapper">
                                <select>
                                    <option value="">-Select Programme-</option>
                                    <option value="1">Yogalates</option>
                                    <option value="2">Pilates</option>
                                    <option value="3">Kick Boxing</option>
                                    <option value="4">K-Pop Dance</option>
                                    <option value="5">Hip Hop</option>
                                    <option value="6">Jazz Aerobics</option>
                                    <option value="7">Zumba</option>
                                    <option value="8">Fitball</option>
                                </select>
                            </div>
                        </div>
                    <div>OR</div>
                    <div class="3u 12u$(medium)">
                            <div class="12u$">
                                <input type="text" value="" placeholder="Customize your own programme" />
                            </div>
                    </div>
                    <div class="2u 12u$(medium)">
                        <div class="12u$">
                            <input type="text" value="" placeholder="Venue" />
                        </div>
                    </div>
                </div>  
            </p> 
            <p>
                <div class="row" id="newProg">
                </div>
                <div class="row">
                    <div class="2u 12u$(medium)">
                        <a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
                        <a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
                    </div>
                </div>
                <div class="2u 12u$(medium); image right">
                    <a href="#popup1" class="button">Submit</a>
                </div>
            </p>                              
    </form>

主要.js

    var counter = 0;
function addMore() {
        counter++;
        var objNewDiv = document.createElement('div');
        objNewDiv.setAttribute('id', 'addProg' + counter);
        objNewDiv.setAttribute('class', 'row');
        objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
        document.getElementById('newProg').appendChild(objNewDiv);
}

页面加载结果: when page loaded

实际和预期结果: actual and expected outcome

Answer 1

div 的类名不同您在 jquery 中附加的标签。

让它和静态HTML内容一样，就能达到预期的效果。

我看到的差异如下。

静态 HTML 有 - <div class="3u 12u$(medium)"> ，你的 Jquery HTML 有 - <div class="5u 12u$(medium)">

静态 HTML 有 - <div class="3u 12u$(medium)"> , 你的 jquery HTML 有 - <div class="5u 12u$(medium)">

静态 HTML 有 - <div class="2u$ 12u$(medium)"> , 你的 Jquery HTML 有 <div class="3u$ 12u$(medium)">

由于类名的不同，您会发现它在 UI 中的呈现方式不同。