jQuery .html 与 .text

Question

我有以下几点：

var myArray = [];
myArray.push("one", " two");
document.getElementById("write").innerHTML = myArray;

哪个输出：one, two

我想用 jQuery 试试：

$("#write").html(myArray);

我得到了：one two

省略了逗号。

为什么？

我看到someone suggest 应该使用.html() 而不是.innerHTML() 并且它的工作原理相同，但是如果jQuery 版本遗漏了一些小细节，那有什么意义呢？

Then I found this post 表示“但是，.text() 函数将更改指定元素的（文本）值，但保留 html 结构。”

这就是为什么.text() 在这种特殊情况下似乎比.html() 工作得更好吗？因为 .text() 保留了结构？

Answer 1

JQuery .html() 方法反过来调用 .innerHTML() JavaScript 函数。由于大多数情况下，除 IE 之外的所有浏览器的行为都应该相同。

检查从http://api.jquery.com/html提取的此信息

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

查看 jquery 站点上.html() 的文档以获取更多信息。

Answer 2

首先，如果您想以自己想要的方式将数据转换为字符串，请不要猜测或依赖某些库会如何为您将其转换为字符串。

第二个：.text() 用于纯字符串 .html() 用于 HTML 字符串。

现在回答为什么：

.innerHtml 和 .text 都只需调用 toString() 即可。 ['one', 'two'].toString() == 'one,two', .html 检查你传递给它的任何东西。如果它是数组，它将对其进行迭代，调用toString 并连接结果。你可以在这里看到处理：https://github.com/jquery/jquery/blob/1.11-stable/src/manipulation.js#L285

Answer 3

查看 jQuery 源代码后 - .html() 方法将使用 innerHTML 方法仅当传递的值是字符串并且如果其有效的 html（通过其他一些内部方法验证） .否则，该方法会调用 append() 方法，该方法将数组视为要追加的元素序列或 html 字符串，这就是您看不到逗号的原因。

使用字符串（有效的 html）html() 使用：

elem.innerHTML = value;

如果抛出异常或者你传递了一个数组：

this.empty().append( value );

它将遍历数组并追加元素。

您只想将.html() 与应视为 HTML 有效代码的安全代码一起使用。否则使用text()，它将严格将传递的值视为文本，即使它是有效的html。

Answer 4

JQuery 的 html 函数只接受 strings or a function 作为它的参数 - 当我尝试传入一个数组时，它给我抛出了一个错误。

如果您需要保留逗号，并且有意或使用 JQuery（或需要更精细地控制数组的输出方式），您最好先使用 .join() 将数组转换为字符串，即：

$("#write").html(myArray.join(", "))