有没有办法从片段重建有效的 HTML 结构？答案

【问题标题】：Is there a way to rebuild valid HTML structure from a fragment?有没有办法从片段重建有效的 HTML 结构？
【发布时间】：2016-09-10 20:22:36
【问题描述】：

假设您只有<td>text<td></tr>。显然单独使用它是无效的（也不是单独的<td>...</td>）。有没有一种简单的方法可以从这样的片段中重建有效的 html 结构？应该是这样的：<table><tbody><tr><td>text<td></tr></tbody></table>。

【问题讨论】：

只添加元素？？
这不仅仅是关于 TDs 或 TRs，它也是关于 LIs 和 DTs 等等。我知道我可以编写带有地图和层次结构的解析器。我在问是否有更简单的方法。可能是一些本机浏览器方法。
如果没有编写自己的函数来这样做（考虑到各种边缘情况，这不太可能被称为“简单”）。
例如，如果您从选择中检索范围并且它无效（不完整），浏览器将自动用缺少的元素填充它。所以功能就在那里。
目前流行的浏览器都没有这个功能。大多数你可以做的是使用像 Visual Studio 这样的智能 IDE，它可以完成大约一半的工作，即如果你编写它将插入

标签： javascript html dom browser

【解决方案1】：

insertAdjacentHTML 似乎做了正确的事(tm)，即调用考虑上下文的片段解析算法。

table = document.createElement("table")
table.insertAdjacentHTML("beforeend", "<table><tbody><tr><td>Case A</td></tr></tbody></table>")
table.insertAdjacentHTML("beforeend", "<td>Case B</td>")

console.log(table.outerHTML)

/*
<table><tbody><tr><td>Case A</td></tr></tbody><tbody><tr><td>Case B</td></tr></tbody></table>
*/

【讨论】：

不错的一个！虽然我的问题是脚本有点不知道当前元素所需的父（或公共根）应该是什么。如果您不首先创建 'table' 并以 'div' 开头，则 table.insertAdjacentHTML("beforeend", "Case B") 不会插入任何 tds 或 trs .
但是我想这已经与原生方法一样接近了。所以你提出这个问题:)