Live data from Hacker News

Replacing text in the DOM… solved?

james.padolsey.com

1–10 of 18 posts

Re: Replacing text in the DOM… solved?

#5
post #3
post #2

The thing is that also depends on the browser version. You couldn't do that for IE 8 and below because there is not real DOMRange support.

I haven't tested it on IE8 tbh, but this solution doesn't actually use native DOM ranges.

If I remember well the issue came when you want to replace text from a selection.

Re: Replacing text in the DOM… solved?

#6
Oddly enough, I was working on a similar problem earlier today.

I've found that collecting the Text nodes and returning them in an Array is preferable. All it requires is some simple traversal. The developer (that should know what text goes where) can then map text to nodes.

Re: Replacing text in the DOM… solved?

#8
One of the reasons not to use the innerHTML prop is because (almost) all interactivity gets broken; for example a CSS3 animation restarts if you set innerHTML of one of its parent elements.

Another reason is because IE (even the 9) likes to delete white-spaces when you set innerHTML; even in PRE tags!

Re: Replacing text in the DOM… solved?

#9
I actually did something like that a few months ago: https://gist.github.com/3050333

Only the problem was a bit different, I wanted to be able to select a section of a blog post to generate a url fragment representing that selection, so, if you shared it, that section would be highlighted when entering the page, but the underlying problem is the same, example:

http://gnozin.com/sobremesa/2012/07/02/buena_venta/#highligh...

Re: Replacing text in the DOM… solved?

#10

I actually did something like that a few months ago: https://gist.github.com/3050333 Only the problem was a bit different, I wanted to be able to select a section of a blog post to generate a url fragment representing that selection, so, if you shared it, that section would be highlighted when entering the page, but the underlying problem is the same, example: http://gnozin.com/sobremesa/2012/07/02/buena_venta/#highl…

That's actually Really cool. Looks like you hacked it to do it positionally. What is the 9-1? I'm assuming that last bit is the range in a Dom content substring
Post reply on HN