How can I replace the text in an HTML tag but not in an href link?

Question

I want to write a Javascript function to change the text google in an HTML tag: example:

 <a href='http://google.com'>google</a>

How can I change the text in an HTML tag "google" but not change the content "http://google.com" that is in an href link?

You can Check this This question at Stackoverflow itself http://stackoverflow.com/questions/5232862/jquery-change-inner-text-but-preserve-html — CandleCoder, Jan 01 '16 at 14:23
Well you could do it with php, set a var, then echo it and use Ajax to refresh everyone you change it. — Arsalan, Jan 01 '16 at 14:26

score 5 · Answer 1 · answered Jan 01 '16 at 14:27

If you are using Vanilla JS (plain javascript) then you need to find the a tag by looping among all a and finding the one with href http://google.com and then replace it's innerHTML.

var els = document.getElementsByTagName("a");
for (var i = 0, l = els.length; i < l; i++) {
    var el = els[i];
    if (el.href === 'http://google.com') {
        el.innerHTML = "New Content";
    }
}

Explaination:

A. document.getElementsByTagName will return you the list of all elements matching the passed tag.

B. el.href will get you the href of the a.

C. el.innerHTML = "New Content" will set the new content.

How can I replace the text in an HTML tag but not in an href link?

1 Answers1