javascript - 添加删除列表问题

问题描述

问 题

程序主要意思是输入框输入水果名称，原来列表删除相应的节点，把这种水果添加到另一个列表中
写的程序可以实现，但是后台报错，1.html:61 Uncaught TypeError: Cannot read property 'cloneNode' of undefined
html。。。导致后面的输入框清空语句没法执行，求帮忙 新手

<ul class='cls1'>fruit</ul>
<ul class='cls2'>basket</ul>
<input type="text" id='in' name="test"/>
<input id='check' type='submit'  value='submit' name='btn'/>

JS

  window.onload=function(){
     window.onload=function(){
      var arr=['mango','apple','grape','watermelon'];
         var list="";
         for(var k=0;k<arr.length;k++){
             list+='<li>'+arr[k]+'</li>'
          document.querySelector('.cls1').innerHTML=list;
         }
         var check=document.getElementById('check');
         var list1 =document.querySelector('.cls1');
           check.addEventListener("click",function(){
                var content=document.getElementById('in').value;
                var list2 =document.querySelector('.cls2');
                var aLi=document.getElementsByTagName('li');
                for(var i=0;i<aLi.length;i++){
                 if(content==aLi[i].innerText){
                       list2.appendChild(list1.children[i].cloneNode(true));
                       list1.removeChild(list1.children[i]);
                 }
                }
                document.getElementById("in").value="";
           })
 
 }

解决方案

for(var i = 0; i < aLi.length; i++) {
    if(content == aLi[i].innerText) {
            list2.appendChild(list1.children[i].cloneNode(true));
            list1.removeChild(list1.children[i]);
            document.getElementById("in").value="";//这行可以改成content="";这样不用再去重复获取dom，可以提高代码效率，当然其他地方有很多可以优化的。
            break;
        }
}

原生js克隆节点是用cloneNode不是clone，把循环内代码改成我这样能正常运行

出不来效果的时候记得看控制台的报错。

这篇关于javascript - 添加删除列表问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！