如何隔离CSS div？

Question

我需要在折叠/展开div中显示提取的html内容(仅HTML，没有JS )，但提取的内容并不总是“有效”的，它可能有更多的关闭div，因此它关闭了我的UI的div并破坏了UI。除了iframes之外，这个问题还有什么解决方案吗？也许是一个js库来清理这类内容。我使用的是AngularJS和boostrap。我认为这也可以使用Shadow dom来完成，但我不确定它是如何工作的/可以做到的，所以我想知道是否有使用shadow DOM的展开/折叠插件。

Answer 1

您可以创建一个页面外div，在其中添加您的(可能无效的) HTML内容，让HTML解析器处理所有事情，然后再次获取元素的innerHTML并放入您的页面：

var div = document.createElement( 'div' );
div.innerHTML = '<div></div><span>h</span></div>'; // whatever your content

console.log( div.innerHTML );
// will output "<div></div><span>h</span>" for the example