如何避免jQuery的insertAfter函数插入额外空格？

这个问题我之前也碰到过！本质上是因为你通过字符串拼接的HTML里包含了多余的换行、空格或制表符，浏览器会把这些空白字符解析成单个空格，最终就出现了你看到的额外空格。下面给你几个靠谱的解决办法：

方法1：压缩HTML字符串，去掉不必要的空白 #

把你拼接的HTML字符串里的换行、多余空格全部删掉，改成紧凑的单行形式。比如把原来可能带换行的字符串：

$('<div class="form-row">
    <label>
        <span>Another Number</span>
        <input type="tel" name="Mobile' + X + '">
        <a><img onclick="$(this).closest(\'div\').remove();" class="DeleteNumber" width="25" height="25" src="/Images/Delete.png" /></a>
    </label>
</div>')

改成这样的单行紧凑格式：

$('<div class="form-row"><label><span>Another Number</span><input type="tel" name="Mobile' + X + '"><a><img onclick="$(this).closest(\'div\').remove();" class="DeleteNumber" width="25" height="25" src="/Images/Delete.png" /></a></label></div>')

这样字符串里没有多余的空白，浏览器解析时就不会生成额外的空格了。

方法2：用DOM元素创建代替字符串拼接 #

这种方法更优雅，也能彻底避免空白问题——直接通过jQuery创建每个DOM元素，再组装起来：

var X = 0;
$(function () {
    X++;
    $("#AddNumber").on({
        'click': function () {
            // 创建form-row容器
            var newRow = $('<div>', { class: 'form-row' });
            // 创建label并添加到容器
            var label = $('<label>').appendTo(newRow);
            // 添加span文本
            $('<span>').text('Another Number').appendTo(label);
            // 添加输入框
            $('<input>', {
                type: 'tel',
                name: 'Mobile' + X
            }).appendTo(label);
            // 创建删除按钮的a标签
            var deleteLink = $('<a>').appendTo(label);
            // 添加图片按钮
            $('<img>', {
                class: 'DeleteNumber',
                width: 25,
                height: 25,
                src: '/Images/Delete.png',
                onclick: function() {
                    $(this).closest('div').remove();
                }
            }).appendTo(deleteLink);
            
            // 插入到目标位置
            newRow.insertAfter("#AddNumberAction");
            X++; // 别忘了X要自增，不然所有输入框name都是Mobile1
        }
    });
});

这种方式通过DOM操作构建元素，浏览器不会自动插入多余的空白，同时还能避免字符串拼接时的引号嵌套问题（你原来的代码里onclick="$(this).closest("div").remove();"其实有引号冲突，应该用单引号或者转义，用DOM创建的方式就不用纠结这个了）。

额外提醒 #

另外，你原来的代码里X++的位置有点问题——初始化后先X++，第一次点击创建的输入框name是Mobile1，如果这是你想要的没问题，但如果想从Mobile0开始，记得调整X的初始值和自增时机哦。

内容的提问来源于stack exchange，提问作者Abdilrahman Atef L Shoky