所以我试图使用createElement和appendChild向div添加一个部分。并且它在IE(惊喜)之外的每个浏览器中工作都很好,因为父元素没有调整到正确的高度。有趣的是它在IE8的兼容模式下运行得非常好,但IE8没有兼容模式似乎只是在不改变父高度的情况下添加它,添加它好像它的位置是绝对的,甚至认为它不是。父div没有设置高度。
我喜欢这样
<div id="guestArea"></div>
和
<script type="text/javascript">
var numGuest = 0;
function addGuest(){
var guestSection = document.getElementById("guestArea");
numGuest++;
var newGuestDiv = document.createElement("div");
newGuestDiv.innerHTML = '<span style="font-weight: bold; font-size: 14px;"> Guest #' + numGuest + ':</span><br />First name:<br /><input type="text" name="guestFirstName[]" /><br />Last name:<br /><input type="text" name="guestLastName[]" /><br /><br /><div style="padding-left: 5px; border-left: 2px #aeaeae dotted;">Friday:<br /><input type="checkbox" value="1" name="guestAlbanyRec[]" id="guest' + numGuest + 'AlbanyRec" /> <label for="guest' + numGuest + 'AlbanyRec">8:00 PM Albany Reception</label><br /><br />Saturday:<br /><input type="checkbox" value="1" name="guestLunch[]" id="guest' + numGuest + 'Lunch" /> <label for="guest' + numGuest + 'Lunch">12:00 PM Catered lunch & house tours ($10/person)</label><br /><input type="checkbox" value="1" name="guestCampus[]" id="guest' + numGuest + 'Campus" /> <label for="guest' + numGuest + 'Campus">1:00 PM Campus tours & guestni v. active sports</label><br /><input type="checkbox" value="1" name="guestDinner[]" id="guest' + numGuest + 'Dinner" /> <label for="guest' + numGuest + 'Dinner">5:00 PM Dinner dance ($85/person). If attending please check food choice below.</label><br /><input type="radio" value="beef" name="guestChoice[]" id="guest' + numGuest + 'Choice1" /> <label for="guest' + numGuest + 'Choice1">Beef</label> <input type="radio" value="chicken" name="guestChoice[]" id="guest' + numGuest + 'Choice2" /> <label for="guest' + numGuest + 'Choice2">Chicken</label> <input type="radio" value="fish" name="guestChoice[]" id="guest' + numGuest + 'Choice3" /> <label for="guest' + numGuest + 'Choice3">Fish</label> <input type="radio" value="vege" name="guestChoice[]" id="guest' + numGuest + 'Choice4" /> <label for="guest' + numGuest + 'Choice4">Vegetarian</label><br /><br />Sunday:<br /><input type="checkbox" value="1" name="guestBrunch[]" id="guest' + numGuest + 'Brunch" /> <label for="guest' + numGuest + 'Brunch">11:00 AM Brunch ($5/person)</label><br /></div><br />';
//Must append child other wise inputs get reset
guestSection.appendChild(newGuestDiv);
}
</script>
提前感谢您的帮助。
答案 0 :(得分:0)
这可能会有所帮助......
var newGuestDiv = '<span style="font-weight: bold; font-size: 14px;"> Guest #' + numGuest + ':</span><br />First name:<br /><input type="text" name="guestFirstName[]" /><br />Last name:<br /><input type="text" name="guestLastName[]" /><br /><br /><div style="padding-left: 5px; border-left: 2px #aeaeae dotted;">Friday:<br /><input type="checkbox" value="1" name="guestAlbanyRec[]" id="guest' + numGuest + 'AlbanyRec" /> <label for="guest' + numGuest + 'AlbanyRec">8:00 PM Albany Reception</label><br /><br />Saturday:<br /><input type="checkbox" value="1" name="guestLunch[]" id="guest' + numGuest + 'Lunch" /> <label for="guest' + numGuest + 'Lunch">12:00 PM Catered lunch & house tours ($10/person)</label><br /><input type="checkbox" value="1" name="guestCampus[]" id="guest' + numGuest + 'Campus" /> <label for="guest' + numGuest + 'Campus">1:00 PM Campus tours & guestni v. active sports</label><br /><input type="checkbox" value="1" name="guestDinner[]" id="guest' + numGuest + 'Dinner" /> <label for="guest' + numGuest + 'Dinner">5:00 PM Dinner dance ($85/person). If attending please check food choice below.</label><br /><input type="radio" value="beef" name="guestChoice[]" id="guest' + numGuest + 'Choice1" /> <label for="guest' + numGuest + 'Choice1">Beef</label> <input type="radio" value="chicken" name="guestChoice[]" id="guest' + numGuest + 'Choice2" /> <label for="guest' + numGuest + 'Choice2">Chicken</label> <input type="radio" value="fish" name="guestChoice[]" id="guest' + numGuest + 'Choice3" /> <label for="guest' + numGuest + 'Choice3">Fish</label> <input type="radio" value="vege" name="guestChoice[]" id="guest' + numGuest + 'Choice4" /> <label for="guest' + numGuest + 'Choice4">Vegetarian</label><br /><br />Sunday:<br /><input type="checkbox" value="1" name="guestBrunch[]" id="guest' + numGuest + 'Brunch" /> <label for="guest' + numGuest + 'Brunch">11:00 AM Brunch ($5/person)</label><br /></div><br />';
var range = document.createRange();
var fragmentToInsert = range.createContextualFragment(newGuestDiv);
document.getElementById('guestArea').appendChild(fragmentToInsert);