javascript附加奇数输出

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>

不错。 < option > 很好地嵌套在 < select > 内。

但是这段代码产生了不同的结果，即使我所做的只是将 < option > 元素从第三行末尾移动到第四行上它自己的 .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>

“联系人”选项是如何出现在 、 和

之外的？或者当我到达第 3 行末尾时关闭我的开放元素，即使我还没有完成在这些元素中添加内容，是否有什么东西对我有“帮助”？

最佳答案

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

更好的方法是创建要添加的整个 html 字符串，然后一次将它们全部附加，既可以防止此问题，也可以提高效率。

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

例如:

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附加奇数输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26374216/

上一篇：javascript - 如何将数据绑定(bind)到钛合金标签上？

下一篇：javascript - AngularJS 服务不返回 JSON 数据

相关文章：

javascript - npm run build 时显示错误

javascript - 为什么将 event.target 存储在变量中？

javascript - 如何防止用户拖动 HTML 输入类型 ='range' 对？

javascript - 如何使用 forEach() 定义文件路径集合

jQuery 无法在 ASP.NET 的 UpdatePanels 中工作

javascript - 如何在单击链接时将动态内容添加到 Bootstrap 模式 - Jquery/JS

jquery - ASP.NET AJAX jQuery

javascript - Bootstrap Modal 传递 ID 不起作用

.net - ASP.NET MVC : AJAX ActionLink- Target an HTML attribute

javascript - 在 AJAX 工作流方面需要帮助

©2024 IT工具网  联系我们

Answer 1

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

更好的方法是创建要添加的整个 html 字符串，然后一次将它们全部附加，既可以防止此问题，也可以提高效率。

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

例如:

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);
}