我想在单击“ +”按钮[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);
}
实际和预期结果:实际和预期结果
您要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中的呈现方式有所不同。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句