Заменить часть innerHTML без перезагрузки встроенных видео

Question

У меня есть div с id #test, который содержит множество html, включая некоторые вставки на YouTube и т. Д.

Где-то в этом div есть текст: "[test]"

Мне нужно заменить этот текст на «(работает!)».

Обычный способ сделать это, конечно, будет:

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

Но проблема в том, что если я это сделаю, youtube-embeds перезагрузится, что недопустимо.

Есть ли способ сделать это?

Answer 1

Может быть TextNode (textContent) поможет вам, MSDN документация IE9, другие браузеры также должны его поддерживать

Answer 2

Измените свою страницу так, чтобы

[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 определенно пригодится:)

Answer 3

Вы должны быть нацелены на определенные элементы, а не на родительский блок. Поскольку DOM меняется, видео перерисовывается в DOM.