jQuery and append without adding space

Question

I have the code:

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

Note: between the span tags don't have spaces. If I use:

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

The append adds a space in the line. Is there any other way to put a tag without having to add space?

I need the jquery generates a code like this:

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

Thank you.

Can you clarify why you need to eliminate the whitespace in your source? Are you experiencing unwated side-effects in the display of your page? — jackwanders, Aug 13 '12 at 16:11
I'm guessing you're using `display: inline-block` on the spans, so the space does affect the layout. Right? Couldn't you use something else in this case, like floats? — bfavaretto, Aug 13 '12 at 16:12
I need to use it because the site layout was done this way. If I add a space at the last element, will be one more space for the other menu items. — André Golvea, Aug 13 '12 at 16:15
Yes, the layout uses display: inline-block. I would not use floats because this system will break down various parts of the site. : ( — André Golvea, Aug 13 '12 at 16:17
RPM, I can not touching the core system. So I need to add a more "dirty" code. — André Golvea, Aug 13 '12 at 16:18
@bfavaretto instead of asking him to use something else, why not actually answer the question of how to append without adding whitespace at the end? I just encountered the same issue. And by the way, floats are a completely different way to render and sometimes you need display: inline-block; — Gregory Magarshak, Jul 30 '20 at 22:14
@GregoryMagarshak Well, I can't really remember why I commented that 8 years ago instead of answering. The web was different back then, and maybe I didn't know another option at the time. Also, I was new to this site. — bfavaretto, Jul 30 '20 at 22:28

David Thibault · Accepted Answer · 2012-08-13T16:50:07.170

15

This fixes the problem:

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

jQuery was appending your new item after the line break. Using span:last-child will select the last menu item and then using .after() will add the new item directly after it.

Please note that this will not work if .message is currently empty. You would need to check for this and use your current code in that case to add the first element.

See the result here: http://jsfiddle.net/ZbSCU/

edited Aug 13 '12 at 16:50

answered Aug 13 '12 at 16:20

David Thibault

8,638
3
37
51

Much as I like Esaliija's code, I prefer this because it puts the node exactly where it's required the first time. – Alnitak Aug 13 '12 at 16:28
@Alnitak I have since then fixed my answer, it's just the initial html that needs to be purified. After that one can add normally. – Esailija Aug 13 '12 at 16:29

Esailija · Answer 2 · 2012-08-13T16:23:47.603

You could remove the whitespace nodes from your initial html:

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

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

Now, unless you explicitly add whitespace yourself dynamically, there should be none.

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

The html representation after this treatment is:

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

bfavaretto · Answer 3 · 2012-08-13T16:49:13.467

4

I don't think it's jQuery inserting the space. Your HTML contains a line break after the second span, so I guess it's part of the DOM, and jQuery is appending the element after it.

You could try this alternative:

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

edited Aug 13 '12 at 16:49

answered Aug 13 '12 at 16:15

bfavaretto

71,580
16
111
150

Yea, I confirmed this in jsFiddle. The linebreak is definitely rendering as a space. – maček Aug 13 '12 at 16:16
Thanks, this points out that if you have control of the markup, the real solution is just to change it to not have a space/linebreak at the end so you aren't appending after it. Worked for me! – mrooney Feb 16 '14 at 22:29

score 1 · Answer 4 · answered Aug 13 '12 at 19:55

Ok so I researched my post a little better and it is depending on what text is entered in the jsFiddle frame. tabs are replaced by spaces so this code works on jsFiddle. try what indexes of substring removes your spaces. 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);

score -1 · Answer 5 · answered Aug 13 '12 at 16:16

-1

According to this http://jsfiddle.net/uPm2D/ what you are stateing is not correct. Can you provide more detail? what might happen is browsers inter pret your code as:

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

answered Aug 13 '12 at 16:16

Pablo Jomer

9,870
11
54
102

OP is probably using `display: inline-block`. See demo: http://jsfiddle.net/uPm2D/1/ – bfavaretto Aug 13 '12 at 16:17
Pablo, the result of your fiddle demonstrates a space before `Meun 3`. This is the exact problem he's trying to fix. – maček Aug 13 '12 at 16:17
ok there is a line break but i did a search for space.. the problem is still probably css related. Sry for the bad info. – Pablo Jomer Aug 13 '12 at 19:38

jQuery and append without adding space

5 Answers5