Javascript 将类添加到元素内部的 <i>

Javascript Adding a Class to a <i> inside of an element

本文关键字：内部 添加 元素 Javascript      更新时间：2023-09-26

我在尝试在没有jquery的情况下做事时遇到了一个可耻的问题，我正在尝试将一个类添加到<i>元素中<span>中，我知道这很容易用jquery做到，但是我在使用Vanilla Javascript时失败了：

<span id='my1'>
<i>...</i>
</span>
<span id='my2'>
<i>...</i>
</span>
<script type="text/javascript">
    var i1 = document.querySelectorAll('#my1 i');
    i1.className = 'test'
    i1.textContent = 'yep'

    var i2 = document.getElementById('my2').getElementsByTagName('i')
    i2.className = 'test'
    i2.textContent = 'yap'
    i2..innerHTML = 'what?'
</script>

小提琴：https://jsfiddle.net/exmcw2uh/
谢谢

.getElementsByTagName('i')返回一个集合，因此您必须引用要修改的索引：

var i2 = document.getElementById('my2').getElementsByTagName('i')[0];

您在这里还有一个额外的.：i2..innerHTHML 。 除此之外，getElementsByTagName返回一个数组，这是有意义的。 您的数组有一个成员，因此您可以例如执行以下操作：

i2[0].className = 'test'
i2[0].textContent = 'yap'
i2[0].innerHTML = 'what?'

这是你的小提琴。

您需要解决以下几点：

var i1 = document.querySelector('#my1 i'); //You want to return a single element, not all matches
i1.className = 'test';
i1.textContent = 'yep';

var i2 = document.getElementById('my2');
var i3 = i2.getElementsByTagName('i')[0]; //Added another var for readability, but you need to specify the first element of the returned array
i3.className = 'test'
i3.textContent = 'yap'
i3.innerHTML = 'what?'

https://jsfiddle.net/exmcw2uh/2/

相关文章：