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

Question

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

在执行此操作时，我遇到了将新的li添加到ul的问题。

会有几个ul，用户可以在单击"add_card"按钮的ul中添加li。我确实尝试过，但它只添加到第一个ul中。

这是我试过的。

HTML

<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
}

JavaScript

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item or card item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
e.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var card = document.createElement("div");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue),
h3 = document.createElement("h3");
card.appendChild(h3);
h3.appendChild(t);

if (inputValue === '') {
alert("You must write something!");
} else {
//Create new LIST and its CARD as well
var myBoard = document.getElementById("myBoard");
var newUl = myBoard.appendChild(card);
var myUl = document.createElement("ul");
var list = document.createElement("li");
var h4 = document.createElement("p");
var span = document.createElement("span");
var close = document.createElement("span");
var add_card = document.createElement("span");
newUl.setAttribute("id", "myUL-con");
newUl.appendChild(myUl);    
newUl.appendChild(close);
myUl.appendChild(list);
myUl.setAttribute("id", "myUL");
close.className = "close";
list.appendChild(h4);
h4.setAttribute("id", "sm_title");
h4.setAttribute("contenteditable", "true");
h4.textContent = "Title..";
list.appendChild(span);
span.setAttribute("contenteditable", "true");
span.textContent = "- Note here..";
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
newUl.appendChild(add_card);
add_card.setAttribute("id", "add_card");
add_card.setAttribute("onclick", "addCard()");
//Reset the input value
var resetButton = document.getElementById("myInput");
if(resetButton){
resetButton.value= "";
}
}
// Again, create a "x" button to delete
var span = document.createElement("SPAN");
var txt = document.createTextNode("u00D7");
span.className = "close";
span.appendChild(txt);
card.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
}
}

}
// Creat new Card
function addCard() {
var ul = document.getElementById("myUL");
var li = document.createElement("li");
var add = document.getElementsByClassName("add");
ul.appendChild(li);
li.setAttribute("id", "node");
li.className = "add";
for (i = 0; i < add.length; i++) {
add[i].onclick = function () {
var div = this.parentElement;
div.appendChild(li);
console.log(div);
}
}
}

此外，请告诉我应该在哪里编写代码，以便使所有添加的li都具有与现有li类似的所有功能，因为本应工作的功能也不工作。

Answer 1

代码的行为方式是bcos将每个新的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);

我的工作示例stackblitz