使用 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);