jQuery和追加而不添加空间答案

【问题标题】：jQuery and append without adding spacejQuery和追加而不添加空间
【发布时间】：2012-08-09 21:47:00
【问题描述】：

我有代码：

<div class="message">
    <span>Menu 1</span><span>Menu 2</span>
</div>

注意：span 标签之间不能有空格。如果我使用：

$('.message').append('<span>Menu 3</span>');

追加在行中添加一个空格。有没有其他不用加空格的方式放标签？

我需要 jquery 生成这样的代码：

<div class="message">
    <span>Menu 1</span><span>Menu 2</span><span>Menu 3</span>
</div>

谢谢。

【问题讨论】：

您能解释一下为什么需要消除源代码中的空格吗？您是否在页面显示中遇到了意想不到的副作用？
我猜你在跨度上使用display: inline-block，所以空间确实会影响布局。正确的？在这种情况下你不能使用其他东西，比如花车吗？
我需要使用它，因为网站布局是这样完成的。如果我在最后一个元素处添加一个空格，则其他菜单项将多一个空格。
为什么自动把责任推给jquery？
@GregoryMagarshak 好吧，我真的不记得为什么我在 8 年前发表评论而不是回答。那时的网络不同，也许我当时不知道另一种选择。另外，我是这个网站的新手。

标签： jquery append

【解决方案1】：

我不认为是 jQuery 插入了空格。您的 HTML 在第二个跨度之后包含一个换行符，所以我猜它是 DOM 的一部分，并且 jQuery 在它后面附加了元素。

你可以试试这个替代方案：

var current = $('.message').html().replace(/\r|\n/gm, "");
$('.message').html(current + '<span>Menu 3</span>');

【讨论】：

是的，我在 jsFiddle 中确认了这一点。换行符肯定会呈现为空格。
谢谢，这指出如果您可以控制标记，真正的解决方案就是将其更改为在末尾没有空格/换行符，这样您就不会在其后追加。为我工作！

【解决方案2】：

据此http://jsfiddle.net/uPm2D/ 你所说的不正确。你能提供更多细节吗？可能发生的情况是浏览器将您的代码解释为：

<div class="message">
  <span>Menu 1</span>
  <span>Menu 2</span>
  <span>Menu 3</span>
</div>

【讨论】：

OP 可能正在使用display: inline-block。查看演示：jsfiddle.net/uPm2D/1
Pablo，你的小提琴结果显示了Meun 3之前的一个空格。这正是他试图解决的问题。
好的，有一个换行符，但我搜索了空格..问题仍然可能与 css 相关。抱歉信息不正确。

【解决方案3】：

您可以从初始 html 中删除空白节点：

$('.message').contents().each(function() {
    if (this.nodeType === 3 && !$.trim(this.nodeValue)) {
        $(this).remove();
    }
});

$('.message').append('<span>Menu 3</span>');

现在，除非您自己动态显式添加空格，否则应该没有空格。

http://jsfiddle.net/ktEMx/5/

这样处理后的html表示为：

<div class="message"><span>Menu 1</span><span>Menu 2</span><span>Menu 3</span></div>

【讨论】：

【解决方案4】：

这解决了问题：

$('.message span:last-child').after('<span>Menu 3</span>');

jQuery 在换行符后附加了您的新项目。使用span:last-child 将选择最后一个菜单项，然后使用.after() 将在其后直接添加新项。

请注意，如果.message 当前为空，这将不起作用。您需要检查这一点并在这种情况下使用您当前的代码来添加第一个元素。

在此处查看结果：http://jsfiddle.net/ZbSCU/

【讨论】：

虽然我很喜欢 Esaliija 的代码，但我更喜欢这个，因为它将节点准确地放在第一次需要的位置。
@Alnitak 从那以后我已经修复了我的答案，它只是需要纯化的初始 html。之后就可以正常添加了。

【解决方案5】：

好的，所以我更好地研究了我的帖子，这取决于在 jsFiddle 框架中输入的文本。制表符被空格替换，因此此代码适用于 jsFiddle。尝试子字符串的哪些索引会删除您的空格。 http://jsfiddle.net/uPm2D/3/

var content = $('.message').html();
content = content.substring(5, content.length-1);
console.log("|"+content+"|") # this is just to test
content = content + "<span>Menu 3</span>"
console.log("|"+content+"|") # this is just to test
$('.message').html(content);

【讨论】：