修改innerHTML会使Youtube视频无法播放 - Chrome扩展程序

Question

问题

在Chrome扩展程序中运行此行javacript，youtube上的所有视频都拒绝播放（有时声音但没有图像）。

document.body.innerHTML = document.body.innerHTML;

背景

我正在尝试制作一个突出显示某些字词的Chrome扩展程序，为了做到这一点，我会分析HTML并在适当的位置插入<span style = '...' > -tags。

我通过在javascript中阅读和设置document.body.innerHTML来修改网页。这种方法似乎适用于大多数网站，但如果我尝试以任何方式设置innerHTML，YouTube上的视频就会拒绝播放。

示例

一个简单的工作示例，如果将其作为一种表现形式添加，则可以下载YouTube上无法播放的所有视频here。

编辑：删除了不属于问题的其他信息。

Answer 1

通过

document.body.innerHTML = document.body.innerHTML;
//Or even
document.body.innerHTML += "<span>text</span>";

您正在重新创建正文中的每个元素。这会破坏附加到原始元素的任何事件侦听器，因为这些对象不再存在（新的对象，即克隆）。

不要使用innerHTML插入dom元素，这样做：

1. 导致事件中断，就像你已经学会了一样
2. 将导致重新呈现所有其他不需要发生的元素，如果这样做，通常会导致性能问题。

使用appendChild，insertBefore，removeChild和其他dom函数添加/删除元素。