HTMLElement.innerHTML 将属性添加到 </span> 结束标记，我不知道为什么

Question

我正在使用带有管道的 Angular 13 来重新格式化 contenteditable div 中的文本。一切正常，直到 innerHtml 被新代码替换。最后一个子节点（span 标记）的属性被附加到结束 span 标记的内部。我不知道为什么会这样。

我在 Chromium (MS Edge) v97.0.1072.76 和 Firefox v95.0 上使用带有 Angular 13 的 TypeScript。

这是一个例子：

reformatContent(event: Event) {
const el = (event.target as HTMLElement);

const originalHtml = el.innerHTML;
console.log(originalHtml); // "Some text <span id="someTextId" class="someTextClass">More Text</span>

const newHtml = this.reformatText(originalHtml);
console.log(newHtml); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span> <-- this is ok, what I expected.

el.innerHTML= newHtml;
console.log(el.innerHTML); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span id="someTextId" class="someTextClass someNewClass"> <-- why is this happening???
}

我只想清楚originalHtml 包含关闭</span> 标记。所以我不认为浏览器试图关闭标签。

编辑错字。

编辑 2： 我更新了错别字的原始代码，并更清楚地说明我是如何获得 innerHTML 的。我不认为这就是问题所在，但显然就是这样，因为它有效：

reformatContent(event: Event) {
const e = (event.target as HTMLElement);
const el = document.getElementById(e.id);

const originalHtml = el.innerHTML;
console.log(originalHtml); // "Some text <span id="someTextId" class="someTextClass">More Text</span>

const newHtml = this.reformatText(originalHtml);
console.log(newHtml); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span> <-- this is ok, what I expected.

el.innerHTML= newHtml;
console.log(el.innerHTML); // "Some text <span id="someTextId" class="someTextClass someNewClass">More Text</span> <-- now it works
}

我不明白为什么原始获取元素的方式会导致这个问题。我修复了它，但我真的很想了解这里发生了什么。

Answer 1

什么是reformatText函数？

this.reformatText(originalHtml)

这个函数正在改变你的跨度，你的错误来自这里。

您可能会说您的结果是正确的，但您在无效变量（originalHtml）上使用了 console.log

什么是 originalHtml？在哪里？

但一般我知道，你的问题是因为这条线：

const newHtml = this.reformatText(originalHtml);