Safe innerHMTL replace in html using javascript

Question

I'm working on a small javascript that would change the look of certain page and to do so I have to change certain parts of the HTML (that means that it can't be changed through CSS). The only solution I managed to find so far is the function replace() in javascript. However it seems like a pretty unfortunate solution to change the innerHTML directly even though it's the fastest way from what I know.

Here is the original html:

<div data-sigil="touchable" class="_52x6 touchable">
  <a href="/messages/?ref=bookmarks&amp;app_id=217974574879787" class="_5lut _5luu">
    <div class="_52x3">
      <i class="_5i9c img" style="background-image: url(https://static.xx.fbcdn.net/rsrc.php/v2/yH/r/d3XxBNxqXrK.png);"></i>
    </div>
    <div class="_52x7">Messages</div>
    <div class="_55fj hiddenElem">
      <span>0</span>
      <span class="_55fk">new</span>
    </div>
  </a>
</div>

And I want to change the link in background-image: url(link); to load different image instead of the original one. And then I want to change Messages in <div class="_52x7">Messages</div> to Mail.

What is the problem? These elements don't have their unique IDs so it's not possible to use getElementById() to find them and if I replace these strings within entire html, it will break all links and scripts on the page. (because of how innerHTML works)

Is there any possible way to replace mentioned strings? (I can't use jQuery and all the classes are quite common in the html so I can't use getElementsByClassName() either, unless I'd cycle through all of them, but that seems like a pretty unfortunate solution to me)

`innerHTML` is not that fast. Cycle through all of them, and don’t worry about its performance unless you determine it to be a problem after implementing it. — Ry-, Nov 25 '15 at 16:32
Related: http://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext — Prinsig, Nov 25 '15 at 16:34
Are you familiar with `document.querySelector()` and `document.querySelectorAll()`? — Thriggle, Nov 25 '15 at 16:35
you can use `document.querySelector()` it works faster, read more here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — Andrew Evt, Nov 25 '15 at 16:35
@Prinsig That's not really the problem, one of the strings is in style, not in innerHTML.. — natiiix, Nov 25 '15 at 22:37
@vp_arth As I mentioned above, I can't rely on classes, they appear a lot in this particular html. — natiiix, Nov 25 '15 at 22:37
@Thriggle AndrewEvt Thanks guys, that seems like it could work! — natiiix, Nov 25 '15 at 22:38

Rounin · Answer 1 · 2015-11-25T16:50:18.840

0

Do your class names appear just once?

ie. is the i element in your markup the only element in the document with the class _5i9c ?

If so, getElementsByClassName is all you need:

getElementsByClassName('_5i9c')[0].style.backgroundImage = 'url(different-image.png)';
getElementsByClassName('_52x7')[0].innerHTML = 'Mail';

=====

Correction:

I missed your detail at the end stating that your class names are distributed repeatedly throughout your document.

Consequently, I would recommend, instead, something like:

var selectedDivs = getElementsByClassName('_52x7');

for (var i = 0; i < selectedDivs.length; i++) {
if (selectedDivs[i].innerHTML === 'Message') {
selectedDivs[i].innerHTML = 'Mail';
}
}

edited Nov 25 '15 at 16:50

answered Nov 25 '15 at 16:39

Rounin

27,134
9
83
108

3

OP mentioned that "all the classes are quite common in the html so I can't use `getElementsByClassName()` either" – Skyyy Nov 25 '15 at 16:41
1

I suppose this would apply on the `background-image` problem as well.. This is pretty much what I meant by "I can't use getElementsByClassName() either, unless I'd cycle through all of them, but that seems like a pretty unfortunate solution to me". Of course, it should work, but it seems quite slow if I want to replace 20 properties in html with over 1000 elements. Thanks anyways, I will go for it if nothing more efficient works. – natiiix Nov 25 '15 at 22:43

Safe innerHMTL replace in html using javascript

1 Answers1

=====