getElementsByClass和appendChild - 如何仅修改类的最后一个元素

Question

我试图在具有相同类的所有元素的HTML集合的最后一个元素上使用.appendChild。 我正在寻找一种方法，只将按钮添加到此集合的最后一个元素中。 为了找到这个元素的索引，我尝试获取集合的长度并将其存储到变量中。

numberofalerts = document.getElementsByClassName("alert").length

然后在getElementsByClassName []。appendChild上使用括号表示法引用此变量的值。

document.getElementsByClassName("alert")[numberofalerts].appendChild(closebutton)

但是，它返回undefined。

我怀疑这是因为我错误地使用括号表示法......

谢谢！

Answer 1

numberofalerts = document.getElementsByClassName("alert").length

这将为您提供数组的长度，但数组索引始终从0开始到length-1。当你写document.getElementsByClassName("alert")[numberofalerts].appendChild(closebutton)时，它会给你未定义的coz，最后一个索引将小于长度。将其更改为

document.getElementsByClassName("alert")[numberofalerts-1].appendChild(closebutton)

＆＃13;

＆＃13;

var numberofalerts = document.getElementsByClassName("alert").length;

var closebutton = document.createElement("BUTTON");        // Create a <button> element
var t = document.createTextNode("CLOSE");       // Create a text node
closebutton.appendChild(t);    
document.getElementsByClassName("alert")[numberofalerts-1].appendChild(closebutton)

＆＃13;

<div class="alert">1</div>
<div class="alert">2</div>
<div class="alert">3</div>
<div class="alert">4</div>

＆＃13;

＆＃13;

＆＃13;