使用JavaScript更改锚文本

Question

Example HTML:

<div id="video-quality" style="">
<a class="low bttn" href="">
<span>Low Quality</span>
</a>
</div>

Hey im trying to use JavaScript to target an anchor tag and change it's current text of "Low Quality" to "High Quality".

I don't really know JavaScript very well, but this is what I have come up with. But it's obviously not working:

var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor.innerHTML="High Quality";

Answer 1

Assuming the video-quality div will only ever have one anchor in it, you're not far off:

var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor[0].innerHTML="High Quality";
//    ^^^-- change here

(There's a shorter way if you don't need to support IE7 and earlier, see David's answer for more.)

The key was in the name getElementsByTagName (note the plural). It returns a NodeList , not an element. A NodeList is (shockingly!) a list of matching nodes, in this case matching elements . innerHTML is a property of individual elements, so we have to index into the NodeList to access a specific element. The code above assumes there is at least one matching element, and updates its HTML. If you want to be more defensive:

var vid_id=document.getElementById('video-quality');
var anchors=vid_id.getElementsByTagName('a');
if (anchors[0]) {
    anchors[0].innerHTML="High Quality";
}

That allows for the possibility there are no matching anchors.

Note that by doing this, you're removing the span element, since the span is a descendant of the anchor. If you wanted to avoid that, just look for span elements as descendants of the anchor, exactly as you've looked for anchors in the div .

---

FWIW, I'd recommend using a reasonable JavaScript browser-focussed library like jQuery , YUI , Closure , or any of several others . They provide a lot of utility functionality, and smooth over some browser differences. But if you prefer using the DOM directly, that's fine too.

Answer 2

If you don't need legacy support (IE7-), you can write:

document.querySelector('#video-quality a span').innerHTML = 'High Quality';

If you DO need legacy support, I recommend a library like jQuery or similar to make selecting DOM nodes much simpler from a singe, wide-spread API.

Answer 3

Plain javascript:

var vid_id = document.getElementById('video-quality');
var span = vid_id.getElementsByTagName('span');
span[0].innerText='High Quality'

Or you can just use jQuery:

$('#video-quality span').text('High Quality');

hope this helps.

Answer 4

Simple is best. Just give the span element an id and then alter it directly.

<div id="video-quality" style="">
<a class="low bttn" href="">
<span id="quality-setting">Low Quality</span>
</a>
</div>

then script is:

document.getElementById('quality-setting').innerHTML="High Quality";