附加不间断的空间行为

Question

为什么像$('#display').append('&nbsp &nbsp dogs');这样的代码附加“＆amp; nbsp＆amp; nbsp dogs”而$('#display').append('&nbsp &nbsp dogs <br/>');（或添加任何html标记）在两个空格后添加“狗”（如预期的那样）？ jQuery不会将'＆amp; nbsp'识别为html实体吗？我能以某种方式强迫它像html一样对待吗？

$('#display').append('&nbsp &nbsp dogs</br>');
$('#display').append('&nbsp &nbsp dogs <span>hi</span>');
$('#display').append('</br>');
$('#display').append('&nbsp &nbsp dogs');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="display"></div>

Answer 1

jQuery＆＃39; s append function接受多个内容类型作为要追加的内容

  

htmlString，Element，Text，Array，jQuery。

当你使用带有标签的字符串时--jQuery将字符串视为htmlString，并将其转换为html：

＆＃13;

＆＃13;

$('#display').append('<span style="color: red;">a &nbsp &nbsp dogs</sapn>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="display"></div>

＆＃13;

＆＃13;

＆＃13;

此转化也会将拼写错误&nbsp转换为 

但是，如果jQuery没有将字符串识别为html-string，则将其视为文本（并使用字符串创建textNode）：

＆＃13;

＆＃13;

$('#display').append('a &nbsp &nbsp dogs');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="display"></div>

＆＃13;

＆＃13;

＆＃13;

  

此行为在Chrome，Firefox，IE（11）和Safari中都是相同的。