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>

main.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

你错过了JavaScript内部HTML字符串中的一个div。我认为它应该是这样的：

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)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';

如何在按钮上单击html和jquery的<form>中添加<div>

1 个答案: