jquery - jQuery 的 HTMLstring 是如何工作的

Question

我稍微玩了一下 jQuery，然后有了一个想法，所以我决定试一试。

$('table').append('<thead><tr><th><th><th>');

如你所想，这产生了:

table
-thead
--tr
---th
---th
---th

我知道您可以编写以下 HTML 并获得与上面相同的结构:

<table>
  <thead>
    <tr>
      <th>
      <th>
      <th>

我试图查看 jQuery 源代码[1]，但似乎没有任何迹象表明 jQuery 对 htmlString 做了任何特别的事情。 . jQuery 只是将 htmlString 附加为普通字符串并让浏览器完成工作，还是我遗漏了什么？

如果是浏览器完成工作，这是否意味着我可以期待不同浏览器的不同行为？

[1] https://github.com/jquery/jquery/blob/0600a29256be76bd87adb547545bf7219fafb6ee/src/manipulation.js#L41

Answer 1

Does jQuery simply append the htmlString as a normal string and let the browser do the work, or is there something I'm missing?

是的，是的。 :-)

jQuery 让浏览器完成工作，但它会做一些事情来帮助处理否则可能会出现问题的情况。例如:

var row = $("<tr><td>foo</td></tr>");

您可以在 jQuery 中执行此操作，您会得到一个 jQuery 对象，其中包含一个(还)不在 DOM 中的行，DOM 中有一个单元格。

这看起来很简单，但是 jQuery 必须做一些工作来确保 HTML 字符串在表格的上下文中被解析(因为如果你试图让浏览器解析它，比如说，一个 div，有问题)。

编辑:Rob W 指向 some relevant source为此:

// We have to close these tags to support XHTML (#13200)
wrapMap = {

    // Support: IE 9
    option: [ 1, "<select multiple='multiple'>", "</select>" ],

    thead: [ 1, "<table>", "</table>" ],
    col: [ 2, "<table><colgroup>", "</colgroup></table>" ],
    tr: [ 2, "<table><tbody>", "</tbody></table>" ],
    td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],

    _default: [ 0, "", "" ]
};

jQuery 的内部 buildFragment 函数中的代码使用上面的映射(以及从它派生的对象)来确保正确解析 HTML。