jQuery remove() or after() causing whitespace to be removed

Question

I have the following html:

<p>This is some random text in a paragraph with a <span class="blue">blue</span> word.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <i>word</i>.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <span class="blue">word</span>.</p>

My CSS is as follows:

.blue{
  color:blue;
}
.popup{
  background-color:lightblue;
}

And finally my JS:

var popup = false;
$(".blue").click(function(){
  if (!popup){
    $(this).after("<div class='popup'>This is some popup text</div>");
    popup = true;
  }
  else{
    $(".popup").remove();
    popup = false;
  }
});

Now my problem, when I call the remove function on my popup class it removes whitespace between tags As explained in some answers below, the after function could also be causing this. . eg:

<span class="blue">blue</span> <i>word</i>

becomes

<span class="blue">blue</span><i>word</i>

It does not do this when the text following a blue class is not in tags eg:

<span class="blue">blue</span> word

Why does this happen and how can I prevent it?

For further reference here is a fiddle: http://jsfiddle.net/6fqDq/

Edit: It seems this problem is localized to Chrome as it does not occur in FF or IE.

Answer 1

The reason this is happening is because you added a block element(div), the block element breaks into a new line, then when it's removed, it takes away the whitespace with it that's after it, because for HTML a whitespace and a newline is pretty much the same.

You have several solutions, some were mentioned here :

1. Use &nbsp
2. Put a space inside the <i> tag instead of between tags, so <i> word</i> would work fine.
3. Use a <span> tag instead of a div tag on the after .

Answer 2

I don't think the problem is with remove but with after in this case which probably ignore text node and therefore ignoring the white space. If you use append, also it does place the element somewhere else the problem disappear.

http://jsfiddle.net/6fqDq/8/

var popup = false;
$(".blue").click(function() {
    if (!popup) {
        $(this).append("<div class='popup'>This is some popup text</div>");
        popup = true;
    } else{
        $(".popup").remove();
        popup = false;
    }
});

Answer 3

Not sure why it does it. But a quick fix would be to put the white space within the <i> tag. Like this:

<p>This is some random text in a paragraph with a <span class="blue">blue</span><i> word</i>.</p>

See http://jsfiddle.net/6fqDq/5/

Answer 4

只需添加 

<p>This is some random text in a paragraph with a <span class="blue">blue</span>&nbsp;<span class="blue">word</span>.</p>

Answer 5

Use .append instead of .after()

if (!popup){
    $(this).append("<div class='popup'>This is some popup text</div>");
    popup = true;
}

I can't explain why it doesn't work with .after, but i think it could be appending on the whitespace

DEMO

Answer 6

Not sure why it is happening, but maybe replace your spaces with entities?   is a space. You could do it with javascript str.replace('> <', '>&nbsp;<' ) or in php str_replace('> <', '>&nbsp;<', str)