[将内部HTML设置为无效HTML时如何保留原始DOM结构

Question

我将DOM元素的innerHTML设置为在按钮内包含按钮的字符串：

document.body.innerHTML="<div>test0<button>test1<button>test2</button></button></div>"

[呈现HTML后，Chrome浏览器将按钮外的按钮移出：

应用了innerHTML之后，有什么我可以做的以保留嵌套的方式吗？不幸的是，我无法更改它们嵌套的事实（外部组件会生成此结构）。

测试jsfiddle：https://jsfiddle.net/4r5mcn67/

Answer 1

尽管嵌套按钮不是有效的HTML

并且您的外部组件应首先固定]]。

编辑编辑页面的DOM之前，实际上可能可以测试浏览器是否保留组件的HTML结构。

这是非常有限的：

• 尽管您的HTML代码有效，浏览器仍会“修复”标签（小写，自动关闭，空格等）。
• 这将降低您的性能，因为您的浏览器在有效时必须进行两次工作。

但是您可以通过创建该元素，然后用原始HTML检查其呈现的内部HTML，来“验证”浏览器如何构建DOM元素。

let invalidHtml = "<div>test0<button>test1<button>test2</button></button></div>"; // Invalid HTML with nested button's tags.

let validHtml = "<div>test0<button>test1</button><button>test2</button></div>"; // Valid HTML.

let validHtml2 = "<div>test0</DIV>"; // Valid HTML, but will be evaluated as "Invalid".

/**
 * Check if an HTML code structure is preserved by the browser.
 */
function isValidHtml(innerHtml) {
  let testElement = document.createElement('div');
  testElement.innerHTML = innerHtml;

  return testElement.innerHTML === innerHtml; // Strict comparison (very limited application).
}

console.info(isValidHtml(invalidHtml)); // return false.
console.info(isValidHtml(validHtml));   // return true.
console.info(isValidHtml(validHtml2));  // return false.

总的来说，看看为什么这个外部组件生成无效的HTML结构会更加明智。