Javascript jQuery remove（）或after（）导致删除空白

我有以下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>

最后，我的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;
  }
});

var popup=false；
$（“.blue”）。单击（函数（）{
如果（！弹出）{
$（this）.after（“这是一些弹出文本”）；
弹出=真；
}
否则{
$（“.popup”）.remove（）；
弹出=假；
}
});

现在我的问题是，当我调用popup类上的remove函数时，它会删除标记之间的空白 正如下面一些答案中所解释的，after函数也可能导致这种情况。 . 例如：

蓝色单词

变成

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

blueword

如果蓝色类后面的文本不在标记中，则不会执行此操作，例如：

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

蓝色单词

为什么会发生这种情况？我该如何预防

为了进一步参考，这里有一把小提琴：

---

编辑：这个问题似乎局限于Chrome，因为它不会出现在FF或IE中。

不确定为什么会出现。但是一个快速的解决方法是在

标记中添加空白。像这样：

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

这是段落中带有蓝色单词的随机文本

---

请参见使用

.append

而不是

.after（）

if（！弹出窗口）{
$（this.append（“这是一些弹出文本”）；
弹出=真；
}

我无法解释为什么它不能与.after一起使用，但我认为它可能会附加在空白处

---

只需添加

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

这是段落中带有蓝色单词的随机文本

我认为问题不在于删除，而在于本例中的after，它可能忽略文本节点，因此忽略空白。如果使用append，它也会将元素放在其他地方，问题就会消失

var popup=false；
$（“.blue”）。单击（函数（）{
如果（！弹出）{
$（this.append（“这是一些弹出文本”）；
弹出=真；
}否则{
$（“.popup”）.remove（）；
弹出=假；
}
});

不确定为什么会发生这种情况，但可能会用实体替换您的空间<代码>是一个空格。您可以使用javascript

str.replace（'>发生这种情况的原因是因为您添加了一个块元素（div），块元素分成一个新行，然后当它被删除时，它会将它后面的空格去掉，因为对于HTML来说，空格和换行几乎是一样的

您有几种解决方案，这里提到了一些：

使用

在
标记内部而不是标记之间留出一个空格，这样
word
就可以正常工作了
在
之后的
上使用
标记，而不是div标记

为什么空白对你如此重要？@WojciechFrącz因为“某物”和“某物”不是等价的。空白很重要，因为我也有一个红色类，有时一个红色单词和一个蓝色单词挨在一起。它们应该有空格，否则它会变成一个单词。我很确定这不是jQuery的问题。如果你在开发工具中查找，DOM不会在
前后的
弹出窗口中发生变化ode>.remove（）
call；看起来几乎没有空格。
.append（）
“起作用”，因为它做了一些完全不同的事情-它不会影响周围的域名。请看，由于“一个无法再复制的问题或一个简单的印刷错误”，该问题被选为非主题关闭。我不认为是这样的，因为它可以很容易地复制，而且它肯定不是导致问题的打字错误。我会更新您的答案，因为它确实解决了问题，但我会让问题停留更长的时间，看看我是否找不到背后的解释。谢谢。虽然这可能只适用于处理丢失的白色-空间，解决方案是脆弱的，例如，想象一下，如果标签的样式是背景。这是一个解决方案，但不是一个好的解决方案。谢谢。听起来像一个计划。：@Nit同意，但如果它适用于场景，并且如果它是remove（）函数的一个奇怪之处，那么我想说，这是一个不让代码变得更复杂的好方法。从现在看到的其他答案来看，它似乎更多地与after（）有关，而不是与remove（）有关。因此，我建议改为使用append（）而不是after（）。你似乎把Ajax误认为是Javascript。是的，对不起，修复了append确实有效的问题，我认为这是目前为止最好的解决方案。它不需要“修复”。它不需要修复，但也不做同样的事情；它在
.blue
元素内部而不是之后创建弹出窗口。请确保在blue元素中不使用空格。否则你可能会再次遇到同样的问题！！！Append是一个完全不同的解决方案，因为它将字符串附加到blue div中，而不是在blue div元素之后。我同意，但对于我的特定情况，它不会对结果产生影响。所以它解决了我的问题，但不是更大的问题。需要注意的是：不是块元素吗？为什么不这样做呢？@Morne看看当弹出窗口是
时会发生什么：-它工作得很好，我看到这实际上只发生在Chrome上。FF和IE并没有引起这个问题，所以现在它从jquery转向html，再转向浏览器problem@Morne奇怪的是，对于第二个和第三个示例，在Dev工具中，我没有明确看到两者之间的空间。但我认为这是第一个例子
<p>This is some random text in a paragraph with a <span class="blue">blue</span><i> word</i>.</p>

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

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

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;
    }
});