javascript - innerHTML 正在更改输入的值

Question

在我正在开发的一个应用程序中，我发现通过重写一个新值来更新 DOMinnerHTML不会产生预期的结果。

我在 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>

标签： javascripthtmlweb-component

Answer 1

You have a typo in your strings. You open with <unit-bar>, but close with </unti-bar>. The closing tags are therefore probably ignored by the browser and it guesses where they should be, resulting in the difference you see.