替换部分innerHTML而不重新加载嵌入的视频

Replace part of innerHTML without reloading embedded videos

本文关键字：加载 的视频 新加载 innerHTML 替换部      更新时间：2023-09-26

我有一个id为#test的div，其中包含大量的html，包括一些youtube嵌入等。

在这个div的某个地方有这个文本:"[test]"

我需要将该文本替换为"(works!)"。

正常的做法当然是:

document.getElementById("test").innerHTML = document.getElementById("test").replace("[test]","(works!)");

但问题是，如果我这样做，youtube-embeds将重新加载，这是不可接受的。

有办法做到这一点吗?

您必须针对特定的元素而不是父块。由于DOM正在改变，视频被重新绘制到DOM。

也许TextNode (textContent)会帮助你，MSDN文档IE9，其他浏览器也应该支持它

让

[test]

是

<span id="replace-me">[test]</span>

现在使用下面的js来查找并更改它

document.getElementById('replace-me').text = '(works!)';

如果您需要更改多个位置，则使用class而不是id，并使用document.getElementsByClassName并迭代返回的元素并逐个更改它们。

或者，您可以使用jQuery，这样做更简单:

$('#replace-me').text('(works!)');

现在使用jQuery进行单个替换可能有些多余，但是如果您需要更改多个位置(通过类名)，jQuery绝对会派上用场:)

相关文章：