使用 javascript 将新 li 添加到多个 ul 之一

Question

我正在尝试用 javascript 制作一个板。

li在这样做时，我在添加新内容时遇到了麻烦ul。

会有多个ul，用户可以li通过ul单击“add_card”按钮添加。我确实尝试过，但它仅添加到第一个ul.

这是我尝试过的。

超文本标记语言

<main>

<div id="myTitle" class="bigTitle">

  <input type="text" id="myInput" placeholder="TItle...">

  <span onclick="newElement()" class="addBtn">Add</span>

</div>

<div id="myBoard">

  <div id="myUL-con">

    <h3 contenteditable="true">Things to do</h3>

    <span class="close close_list"></span>

    <ul id="myUL" runat="server">

      <li id="node" draggable="true" ondragstart="drag(event)">

        <h4 id="sm_title" contenteditable="true">Do the meditation</h4>

        <span contenteditable="true">- before going to sleep</span>

      </li>          

    </ul>

    <span id="add_card" onclick="addCard()" type="button"></span>

  </div>      

</div>

CSS

/* When clicked on, add a background color and strikeout text */

ul li.checked {

  background: rgba(106, 140, 168, 0.82);

  color: #f4f5f7;

  text-decoration: line-through

}

/* Add a "checked" mark when clicked on */

ul li.checked::before {

  content: '';

  position: absolute;

  border: solid #f4f5f7;

  border-width: 0 2px 2px 0;

  top: 10px;

  left: 16px;

  transform: rotate(45deg);

  height: 15px;

  width: 7px

}

另外，请让我知道我应该在哪里编写代码，以便使所有添加的li功能都具有与现有功能类似的功能，li因为应该起作用的功能也不起作用。

Answer 1

您的代码的行为方式是因为您将每个新的 li 元素附加到代表第一张卡的“myUL”。你应该做的是给每个新元素一个唯一的 id。我这样做的方式是在添加新元素时：      let ulIdx = 1;      ulIdx++;      let myUL_id = "myUL"+ulIdx.toString();      myUl.setAttribute("id", myUL_id);newUl.appendChild(add_card);add_card.id = "add_card"+ulIdx.toString();add_card.innerText = "Add li element";add_card.setAttribute("onclick", "addCard(this)");然后在函数 addCard(el){} 中，包含以下行；  var add_LI_element = el.getAttribute("id");  var elIndex = add_LI_element.charAt(add_LI_element.length -1);  var ul = document.getElementById("myUL"+elIndex);