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

jQuery是否只是将htmlString附加为普通字符串并让浏览器完成工作，或者是否存在我缺少的内容？

是的，是的。： - ）

jQuery允许浏览器完成工作，但它可以帮助解决可能存在问题的情况。例如：

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

你可以在jQuery中做到这一点，然后你得到一个jQuery对象，它包含一个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。

jQuery的HTMLstring是如何工作的

1 个答案: