jquery - jQuery和追加而不添加空间

Question

我有代码：

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

注意：跨度标签之间没有空格。如果我使用：

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

追加在行中添加一个空格。有没有其他方法可以放置标签而无需添加空间？

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

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

谢谢你。

Answer 1

这解决了问题：

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

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

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

在这里查看结果：http: //jsfiddle.net/ZbSCU/

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>

Answer 3

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

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

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

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

Answer 5

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

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