Some HTML fragments need specific ancestor elements to parse correctly. Wrapping a fragment in its required markup before assigning it to innerHTML supplies that context. section 12.1.1
A wrapper map associates fragment tags with the markup needed to parse them:
- Place <option> and <optgroup> inside <select multiple>. section 12.1.1
- Place table-related elements such as <tr>, <td>, and <th> inside the required table structure. section 12.1.1
Extracting nodes
A getNodes helper selects a wrapper from the fragment’s first tag, assigns the wrapped string to a div’s innerHTML, then descends through the wrapper to return the fragment’s child nodes. section 12.1.1
Table 12.1. Elements that need to be contained within other elements (view table figure)
| Element name |
Ancestor element |
|---|---|
| <option>, <optgroup> | <select multiple>...</select> |
| <legend> | <fieldset>...</fieldset> |
| <thead>, <tbody>, <tfoot>, <colgroup>, <caption> | <table>...</table> |
| <tr> | <table><thead>...</thead></table> <table><tbody>...</tbody></table> <table><tfoot>...</tfoot></table> |
| <td>, <th> | <table><tbody><tr>...</tr></tbody></table> |
| <col> | <table> <tbody></tbody> <colgroup>...</colgroup> </table> |
Browse the element-to-ancestor mapping for the required wrappers. section 12.1.1
