使用JavaScript更改锚文本

HTML示例：

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

---

假设

video quality

div

中只有一个锚点，那么您就不远了：

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

（如果您不需要支持IE7及更早版本，有一种更短的方法，请参阅以获取更多信息。）

键位于名称

getElementsByTagName

（注意复数形式）。它返回一个元素，而不是一个元素。

NodeList

是（令人震惊的！）匹配节点的列表，在本例中是匹配元素的列表

innerHTML

是单个元素的属性，因此我们必须索引到

NodeList

以访问特定元素。上面的代码假设至少有一个匹配元素，并更新其HTML。如果你想更具防御性：

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

这使得可能没有匹配的锚

请注意，这样做是在删除

span

元素，因为

span

是锚的后代。如果要避免这种情况，只需查找

span

元素作为锚的后代，就像您在

div

中查找锚一样

---

FWIW，我建议使用一个合理的JavaScript浏览器集中库，如、、或。它们提供了许多实用功能，并消除了浏览器的一些差异。但是如果您更喜欢直接使用DOM，那也没关系。

普通javascript:

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

也可以使用jQuery：

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

---

希望这有帮助。

如果您不需要旧版支持（IE7-），您可以写：

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

如果您确实需要旧版支持，我建议使用jQuery或类似的库，使从单一、广泛的API中选择DOM节点变得更简单。

简单是最好的选择。 只需给span元素一个id，然后直接修改它

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

---

.getElementsByTagName（）

的结果是一个数组。您应该访问它的元素，而不是数组本身。@MarkoDumic:它不是数组。这是一个

NodeList

说

@MarkoDumic

是一个数组，用于让新手清楚地了解如何工作。@T.J.Crowder:当然，但我只是想指出而不是精确，否则我需要解释NodeList是什么（OP显然不精通JS）。@T.J.Crowder:Fair'nuff，只是它们之间有很大的区别（不仅仅是

NodeList

实例是活动的）。也许“…是一个类似数组的东西，称为

NodeList

”，带有指向规范的链接。请注意，这也将删除文本节点周围的SPAN元素。a）OP没有提到jQuery。B） 您的“纯JavaScript”示例不起作用的原因与OP的代码不起作用的原因相同。

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

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