使用DOMParser解析含<tr>的HTML片段时<tr>丢失，如何修正？

当使用DOMParser解析包含<tr>的HTML片段时，由于<tr>属于表格专用元素，只能在<table>、<tbody>等表格上下文结构中存在，HTML解析器会将脱离上下文的<tr>视为无效内容直接剥离，仅保留其内部文本。以下是两种无需修改responseText的解决方案：

方法一：使用XML模式解析 #

利用DOMParser的application/xml模式严格按照XML规则解析内容，不会执行HTML的容错剥离操作，之后将XML节点导入为当前文档的HTML片段。

let responseText = '<div>Text Content</div><tr><td>Cell</td></tr>';
// 以XML模式解析，完整保留所有标签结构
let xmlDoc = new DOMParser().parseFromString(responseText, 'application/xml');
// 创建文档片段并导入XML节点
let fragment = document.createDocumentFragment();
Array.from(xmlDoc.children).forEach(node => {
  fragment.appendChild(document.importNode(node, true));
});

方法二：通过表格标签提供合法上下文 #

将responseText临时包裹在<table>中，为<tr>提供合法的父容器，避免HTML解析器剥离该元素，之后提取表格内的所有子节点到目标片段中。

let responseText = '<div>Text Content</div><tr><td>Cell</td></tr>';
// 用<table>包裹内容，给<tr>提供合法解析上下文
let wrappedHtml = `<body><table>${responseText}</table></body>`;
let htmlDoc = new DOMParser().parseFromString(wrappedHtml, 'text/html');
let table = htmlDoc.querySelector('table');
let fragment = document.createDocumentFragment();

// 将表格内的所有子节点移到文档片段
while (table.firstChild) {
  fragment.appendChild(table.firstChild);
}

两种方法最终得到的fragment都会完整保留原始内容：

#document-fragment
  <div>Text Content</div>
  <tr><td>Cell</td></tr>

内容的提问来源于stack exchange，提问作者Oleksandr.Bezhan