html 元素的增刪是否存在程式碼備用

阿新 • • 發佈：2020-09-12

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/jquery-2.2.2.min.js"></script>
        <title></title>
        <style>
            ul li p.name{
                color: red;
            }
        </style> 

    </head>
    <body>
        <ul id="box">
        </ul>
        <script type="text/javascript">
            var box = document.getElementById('box');
            //從前端獲取後端的資料
            var data = [
                {id:1,name:'小米8',subName:'你真好',price:98},
                {id: 
2,name:'小米6',subName:'你真好2',price:948},
                {id:3,name:'小米4',subName:'你真好3',price:100},
                {id:4,name:'小米2',subName:'你真好4',price:928},
                {id:5,name:'小米10',subName:'你真好5',price:918}
                ];
            for(var i=0;i<data.length;i++){
                var 
 li=document.createElement('li')
                li.innerHTML=`<p class="name">${data[i].name}</p>
                <p class="subName">${data[i].subName}</p>
                <span class="price">${data[i].price}</span>元`;
                 box.appendChild(li)
            }
            delchild();
            function delchild(){
                
                  var ul = document.getElementById('box');
                            // 建立節點
                            var li1 = document.createElement('li');
                            var li2 = document.createElement('li');
                            li1.innerHTML = '<a href="#">123</a>';
                            li1.setAttribute('class','active');
                            console.log(li1.children);
                            li1.children[0].style.color = 'red';
                            li1.children[0].style.fontSize = '20px';
                            ul.appendChild(li1);
                            // ul.appendChild(li2);
                            //
                            li2.innerHTML = '第一個';
                            ul.insertBefore(li2,li1);
                            //
                          ul.removeChild(li2);
            }
            if(isExist())
            {
                console.log('不操作');
            }
            /* function isExist(){
                //迴圈ul節點
                var liList=$("#box").children("li")
                for(var i=0;i<liList.length;i++){
                var pl=liList.eq(i).find("p");        
                for (var j=0;j<pl.length;j++)
                {
                    console.log(pl.eq(j).text());
                }
                }                
            } */
            function isExist(){
                //迴圈ul節點
                var liList=$("#box").children("li")
                for(var i=0;i<liList.length;i++){
                var pl=liList.eq(i).find("p");        
                for (var j=0;j<pl.length;j++)
                {
                    if(pl.eq(j).text()==='小米8')
                    {
                        return true;
                    }
                    //console.log(pl.eq(j).text());
                }
                return false;
              }                
            }
        </script>
        
    </body>
</html>