innerHTML 正在更改输入的值

Question

在我正在开发的一个应用程序中，我发现通过重写新值来更新 DOM 并innerHTML不能给出预期的结果。

我在 DevTools 控制台中输入以下命令：

document.querySelector('main-app').shadowRoot.querySelector('.unitslist').innerHTML = '<unit-bar>1</unti-bar><unit-bar>2</unti-bar>'

结果如下：

<unit-bar>1<unit-bar>2</unit-bar></unit-bar>

Answer 1

你的字符串有错别字。你以 开始<unit-bar>，但以 结束</unti-bar>。因此，浏览器可能会忽略结束标签，并猜测它们应该在哪里，从而导致您看到的差异。

Answer 2

所以，你可以解决以避免覆盖： - 1.获取div的内容并添加当前要更新的值和现有值DOMElem.innerHTML = DOMElem.value +（要更新的值）