javascript - 如何隔离CSS div？

Question

我需要在折叠/展开 div 中显示提取的 html 内容(仅 HTML，无 JS)，但提取的内容并非始终“有效”，并且它可能具有比应有的更多的关闭 div，因此它关闭我的 UI 的 div 并破坏了 UI。除了 iframe 之外，这个问题有什么解决方案吗？也许是一个 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