由于某种原因,我无法弄清楚,当我使用JS动态地将项目添加到我的ul时,我首先在其下面附加svg,就像在图片中一样。然后,当我再添加一个项目时,第二个项目在列表项目旁边顺利对齐,但在底部总是有一个额外项目,我无法跟踪它来自哪里。图片:
opc.read(opc.list('Ethernet_DWG.*', recursive=True), include_error=True, timeout=10)
https://codepen.io/Limpuls/pen/JNbwPE
修改
好吧,所以我自己解决了问题,只是改了
<ul id="todo">
<!--<li>Grocery shopping</li>-->
</ul>
<ul id="done"></ul>
ul#todo {
font-family: "Roboto", "sans-serif";
font-size: 20px;
font-weight: 600;
position: relative;
}
ul#done {
position: relative;
}
ul li {
list-style-type: none;
padding-bottom: 10px;
}
.check_mark {
background: url("assets/group.svg");
background-repeat: no-repeat;
float: left;
width: 10%;
height: 20px;
/*position: absolute;
top: 2px;
left: 10px;*/
z-index: 99999;
}
(function () {
var button = document.getElementsByTagName("button");
var userInput = document.getElementById("user_input");
var entered = false;
function addItem() {
if (!entered) {
categorize();
}
var li = document.createElement("li");
li.id = "item";
li.innerHTML = userInput.value;
var item = document.getElementsByTagName("ul")[0].appendChild(li);
var checkMark = document.createElement("div")
checkMark.id = "check_mark";
checkMark.className = "check_mark";
document.getElementsByTagName("ul")[0].appendChild(checkMark);
document.getElementById("item").onclick = function () {
li.remove();
checkMark.remove();
}
checkMark.onclick = function () {
var that = this.parentNode.childNodes[2];
var doneList = document.getElementById("done");
doneList.appendChild(that);
/*this.parentNode.childNodes[2].*/
}
userInput.value = "";
}
function categorize() {
entered = true;
var h1 = document.createElement("h1");
h1.innerHTML = "to-do";
document.getElementById("todo").appendChild(h1);
}
button[0].addEventListener("click", addItem, false);
})();
到document.getElementsByTagName("ul")[0].appendChild(checkMark)
但现在的问题是,当我点击复选标记将项目移动到另一个ul列表item.appendChild(checkMark);
时,我在控制台中出错
#done
我只是想不通为什么这是hapenning。有帮助吗?感谢