将svg动态附加到列表项

时间:2017-04-26 09:52:36

标签: javascript html css svg

由于某种原因,我无法弄清楚,当我使用JS动态地将项目添加到我的ul时,我首先在其下面附加svg,就像在图片中一样。然后,当我再添加一个项目时,第二个项目在列表项目旁边顺利对齐,但在底部总是有一个额外项目,我无法跟踪它来自哪里。图片: enter image description here

enter image description here

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。有帮助吗?感谢

0 个答案:

没有答案