jQuery和append方法如何避免添加空格

Question

我有以下代码：

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

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

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

在行末添加内容时，使用append()方法会在行尾添加一个空格。有没有其他方法可以在不添加空格的情况下放置标记？

我需要 jQuery 生成类似于以下代码：

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

谢谢。

- André Golvea

---

你能解释一下为什么需要在源代码中消除空格吗？你的页面显示是否出现了不必要的副作用？ - jackwanders

我猜你在span上使用了“display: inline-block”，所以空格确实会影响布局。对吧？在这种情况下，你不能使用其他东西吗，比如浮动（floats）？ - bfavaretto

为什么总是自动归咎于jQuery？ - Ryan

是的，布局使用display: inline-block。我不会使用浮动，因为这会破坏网站的各个部分。 :( - André Golvea

@GregoryMagarshak 嗯，我真的记不得8年前为什么要发表评论而不是回答。当时的网络环境与现在不同，也许我当时并不知道其他的选项。此外，我还是这个网站的新手。 - bfavaretto

Answer 1

这解决了问题：

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

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

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

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

- David Thibault

---

虽然我很喜欢Esaliija的代码，但我更喜欢这个，因为它可以在第一次放置节点时将其放置在需要的位置。 - Alnitak

@Alnitak，我已经修复了我的答案，只需要清理初始的HTML。之后就可以正常添加了。 - Esailija

Answer 2

您可以从初始的 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>

- Esailija

Answer 3

我认为这个空格不是由jQuery插入的。你的HTML在第二个 元素后面有一个换行符，所以我猜这是DOM的一部分，而jQuery是在它之后附加元素。

你可以尝试以下这种替代方案：

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

- bfavaretto

---

是的，我在 jsFiddle 中确认了这一点。换行符确实被渲染为一个空格。 - maček

谢谢，这指出如果你能控制标记，则真正的解决方案就是将其更改为不在末尾拥有空格/换行符，以便你不会在其后添加。 对我有效！ - mrooney

Answer 4

好的，我对我的帖子进行了更深入的研究，它取决于在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);​

- Pablo Jomer

Answer 5

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

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

- Pablo Jomer

---

OP 可能正在使用 display: inline-block。请参见演示：http://jsfiddle.net/uPm2D/1/。 - bfavaretto

Pablo，你的fiddle演示了在“菜单3”之前有一个空格。这正是他试图解决的确切问题。 - maček

好的，虽然有换行，但我搜索了空格..问题仍然可能与CSS相关。对于错误信息抱歉。 - Pablo Jomer