getElementsByClassName 中的动态元素

Question

我有这个 getElementsByClassName 的代码

<div id="menu">My List</div>

<div id="menu">
  <div>Coffee</div>
  <div class="lala">Tea</div>
  <div class="lala">Tea</div>
  <div class="lala">Tea</div>
  <div class="lala">Tea</div>
</div>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var num = document.getElementsByClassName('lala').length+1;
    document.getElementsByClassName("lala")[num].innerHTML = "etc";
}
</script>

但它只是不起作用。 它仅在我手动将数字代替变量时才有效

document.getElementsByClassName("lala")[2].innerHTML = "etc";

我需要在最后一个类之后插入它，它是动态生成的，所以我不知道确切的数字。我做错了什么？

Answer 1

试试这个

document.getElementsByClassName("lala")[document.getElementsByClassName("lala").length - 2].innerHTML = "etc";

Answer 2

您可以执行以下操作：

function myFunction() {
    var lalaElementsLength = document.getElementsByClassName('lala').length;
    document.getElementsByClassName("lala")[lalaElementsLength - 1].innerHTML = "etc";
}

通过将[lalaElementsLength - 1] 作为索引号，您可以确保始终获得列表中的最后一个元素。

您甚至可以通过使用以下代码省略对 lala 元素的第二个查询来缩短代码：

function myFunction() {
    var lalaElements = document.getElementsByClassName('lala');
    lalaElements[lalaElements.length - 1].innerHTML = "etc";
}

Answer 3

然后数组的索引从0开始。然后如果你有3个项目，它将是索引：0 1 2

而 document.getElementsByClassName('lala').length 返回项目数：3。那么你应该更新：

var last_index = document.getElementsByClassName('lala').length - 1;

Answer 4

我对你的问题有点困惑。

我可以通过两种方式理解这个问题：

方式一：

你想通过lala类插入最后一个li标签，内容为“etc”。

你错了：

var num = document.getElementsByClassName('lala').length+1;

一定是：

var num = document.getElementsByClassName('lala').length-1;

你应该设置变量来包含选择器：

var selectors = document.getElementsByClassName ('lala');
var num = selectors.length - 1;
selectors[num].innerHTML = "etc";

方式 2：

你想通过lala类自动创建一个新的li标签，它的内容是"etc"。

执行此操作的代码如下：

function myFunction () {
    var selectors = document.getElementsByClassName('lala');
    var num = selectors.length - 1;
    var newDiv = document.createElement('div');
    newDiv.classList.add('lala');
    newDiv.innerHTML = "etc";
    selectors[0].parentNode.insertBefore(newDiv, selectors[num].nextSibling);
}