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

【问题标题】：How to add <div> in <form> on button click html and jquery如何在按钮单击html和jquery的<form>中添加<div>
【发布时间】：2016-12-03 15:34:28
【问题描述】：

每当单击“+”按钮 [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

【问题讨论】：

你能创建一个 SO sn-p / fiddle 吗？
@user7146946 HTML 不完整。请分享整个 DIV 代码。
@Kumar_Vikas 分享了整个 DIV 代码。

标签： javascript jquery html css

【解决方案1】：

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

使其与静态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 中呈现方式的不同。

【讨论】：

如果类名相同，则div结构中输入文本的输出结果与静态HTML中的大小不同
@user7146946 你已经有 div 类 row 作为新内容的占位符，但是在你的 jquery 中你再次构建一个 div 类 row 所以可能就是这样一个问题..尝试更改并检查

【解决方案2】：

您错过了 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> ';

【讨论】：

加了那个div，结果还是一样
在 CSS 中为 6u$ 12u$ 类添加 display: inline-block;。结合我的回答中的代码。
@user7146946 你试过我的 ^ 评论了吗？