Question

我有代码：

<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>

谢谢。

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。尝试使用substring的索引删除你的空格。 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>

jQuery并追加而不添加空间

5 个答案: