jQuery并追加而不添加空间

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>