Replace part of innerHTML without reloading embedded videos

I have a div with id #test that contains lots of html, including some youtube-embeds etc.

Somewhere in this div there is this text: "[test]"

I need to replace that text with "(works!)".

The normal way of doing this would of course be:

document.getElementById("test").innerHTML = document.getElementById("test").replace(开发者_开发知识库"[test]","(works!)");

But the problem is that if i do that the youtube-embeds will reload, which is not acceptable.

Is there a way to do this?

You will have to target the specific elements rather than the parent block. Since the DOM is changing the videos are repainted to the DOM.

Maybe TextNode (textContent) will help you, MSDN documentation IE9, other browsers also should support it

Change your page so that

[test]

becomes

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

now use the following js to find and change it

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

If you need to change more than one place, then use a class instead of an id and use document.getElementsByClassName and iterate over the returned elements and change them one by one.

Alternatively, you can use jQuery and do it even simpler like this:

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

Now for this single replacement using jQuery is probably overkill, but if you need to change multiple places (by class name), jQuery would definitely come in handy :)