$.append()和$.append(document.createTextNode())的区别

Question

使用以下html

<div id="duo">batman</div>

下面两行jQuery的区别是什么？

$('#duo').append(' and robin');

$('#duo').append(document.createTextNode(' and robin'));

他们都生产

<div id="duo">batman and robin</div>

第一个html和第二个仅仅是一个字符串吗？有关系吗？这意味着什么?区别是什么？

编辑

如果引号中的文本是' and <em>robin</em>'呢？前一条语句似乎产生强调的文本，而后者实际上在页面上呈现可见的<em>标记。

Answer 1

结果是相同的，唯一的区别是jQuery在第一行中创建文本节点。

如果使用DOM方法查看结果(因为jQuery使用的是元素，而不是节点)，则可以看到创建的文本节点：

$('#duo').append(' and robin');
$('#duo').append(document.createTextNode(' and robin'));

var c = document.getElementById('duo').childNodes;
for (var i = 0; i < c.length; i++) {
    console.log(c[i]);
}

输出：

<TextNode textContent="batman">
<TextNode textContent=" and robin">
<TextNode textContent=" and robin">

小提琴：http://jsfiddle.net/Guffa/tgqz37m5/

Answer 2

没什么区别。在第一种情况下，jQuery只是为您处理额外的工作。