Question

我有一些JavaScript AJAX函数，应该在发生某些事情时重写我页面的一部分。它的效果很好......除了我告诉它写给该部分的内容并不总是在页面上结束。

例如：这段代码输出了我所期望的，一个包含一个项目的下拉列表。

function(response) {
    $('#serverSelection').html('');
    $('#serverSelection').append('<div class="form-group"><label class="control-label col-md-2" for="ServerList">Assign the Sentinel to a Server</label><span class=" col-md-10"><select class="form-control" id="SentinelServerId" name="SentinelServerId"><option value="Contact">Contact</option>');        
    $('#serverSelection').append('</select></span></div>');
}

和预期的输出

<span class="form-group" id="serverSelection">
    <div class="form-group">
        <label class="control-label col-md-2" for="ServerList">Assign the Sentinel to a Server</label>
        <span class=" col-md-10">
            <select name="SentinelServerId" class="form-control" id="SentinelServerId">
                <option value="Contact">Contact</option>
            </select>
        </span>
    </div>
</span>

尼斯。＆lt;选项＆gt;很好地嵌套在＆lt;选择＆gt;。

但是这段代码产生了不同的东西，即使我所做的只是移动＆lt;选项＆gt;从第3行末尾到第4行自己的.append（）的元素。

function(response) {
    $('#serverSelection').html('');
    $('#serverSelection').append('<div class="form-group"><label class="control-label col-md-2" for="ServerList">Assign the Sentinel to a Server</label><span class=" col-md-10"><select class="form-control" id="SentinelServerId" name="SentinelServerId">');
    $('#serverSelection').append('<option value="Contact">Contact</option>');
    $('#serverSelection').append('</select></span></div>');
}

这就是它产生的东西。我真的希望与第一个（正确的）输出完全相同。

<span class="form-group" id="serverSelection">
    <div class="form-group">
        <label class="control-label col-md-2" for="ServerList">Assign the Sentinel to a Server</label>
        <span class=" col-md-10">
            <select name="SentinelServerId" class="form-control" id="SentinelServerId"></select>
        </span>
    </div>
    <option value="Contact">Contact</option>
</span>

联系人选项如何在＆lt;＆lt;之外结束？选择＆gt;，＆lt; span＆gt;，＆lt; div＆gt;？或者是让我感到有兴趣的东西＆＃39;当我到达第3行的末尾时关闭我的开放元素，即使我没有在这些元素中添加内容？

Answer 1

我认为这是因为jQuery会在每次调用append时自动附加结束标记。

更好的方法是，为了防止这个问题和效率，要创建你想要添加的整个html字符串，然后立即将它们全部附加。

jsfiddle：http://jsfiddle.net/xc2hpwa2/

E.g：

function (response){
    var html = '';
    html += '<div class="form-group"><label class="control-label col-md-2" for="ServerList">Assign the Sentinel to a Server</label><span class=" col-md-10"><select class="form-control" id="SentinelServerId" name="SentinelServerId">';

    html +='<option value="Contact">Contact</option>';

    html += '</select></span></div>';

    $('#serverSelection').html(html);
}

javascript附加奇数输出

1 个答案: