时间戳

首页 > 解决方案 > 是否可以通过按类名定位列表容器来附加列表项？

javascript - 是否可以通过按类名定位列表容器来附加列表项？

问题描述

我在 html 中有这个嵌套列表：

      <ul>
        <li > Group One(<span id = "amount1"> 0 </span>)
          <ul class = "names"> </ul> </li>

        <li> Group Two (<span id = "amount2"> 0 </span>)
          <ul class = "names" > </ul> </li>

        <li> Group Three (<span id = "amount3"> 0 </span>)
          <ul class = "names"> </ul> </li>

        <li> Group 4 (<span id = "amount4"> 0 </span>)
          <ul class = "names"> </ul> </li>
      </ul>

我想追加

  • 使用 Javascript 将项目添加到内部列表中。

    当我尝试使用 Javascript 时，我的代码如下所示：

    function newPerson (index,name) {
  let li = document.createElement("li")
  let t = document.createTextNode(name);
  let u = li.appendChild(t)
  document.getElementsByClassName("names")[index].appendChild(u)
}

function getNames () {
    var group1= [JOHN DOE, MARY JANE, KAT WU]
    var nameLower = group1[random].toLowerCase()
    console.log (nameLower)
    console.log (document.getElementsByClassName("names"))
    newPerson(nameLower,0)

    对于第 2 组，依此类推。按下按钮将触发 getNames 函数。

    这种工作，但我的清单最终看起来像：

    第 1 组 (3)

      John Doemary Janekat Wu

    第 2 组 (2)

      Lina Lialex Cole

    ...ETC。我希望它在哪里

    第 1 组 (3)

    John Doe 

Mary Jane 

Kat Wu

    第 2 组 (2)

    Lina Li 

Alex Cole

    控制台的名称总是正确的，但节点列表永远不会改变（不确定当我添加孩子时是否应该这样做）。

    当我将列表元素直接添加到 HTML 时，格式是正确的，所以我认为这不是 CSS 问题。

    我也试过：

    function newPerson (index,name) {
      let li = document.createElement("li")
      let t = document.createTextNode(name);
      let u = li.appendChild(t)
      let v = document.getElementsByClassName("names")
      v.[index].appendChild(u)
    }

    但这根本没有出现嵌套列表。我按班级选择的方式有问题吗？

    我宁愿不使用 ID，因为我的列表很长，而且我的代码看起来已经够乱了，但是如果没有 ID，这不可能吗？

    • 标签： javascripthtmlappendchild

    解决方案

    您需要附加 createdli而不是u变量，所以使用

    v[index].appendChild(li);

    代替

    v.[index].appendChild(u);


    function newPerson(index, name) {
  let li = document.createElement("li")
  let t = document.createTextNode(name);
  let u = li.appendChild(t)
  let v = document.getElementsByClassName("names")
  v[index].appendChild(li)
}

newPerson(2, 'Satpal')
    <ul>
  <li> Group One(<span id="amount1"> 0 </span>)
    <ul class="names"> </ul>
  </li>

  <li> Group Two (<span id="amount2"> 0 </span>)
    <ul class="names"> </ul>
  </li>

  <li> Group Three (<span id="amount3"> 0 </span>)
    <ul class="names"> </ul>
  </li>

  <li> Group 4 (<span id="amount4"> 0 </span>)
    <ul class="names"> </ul>
  </li>
</ul>

    推荐阅读