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.