js節點的建立添加刪除

時間 2019-11-10

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="box">

        </ul>
        <script type="text/javascript">
            var ul = document.getElementById('box');
            // 建立節點
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
            // // innerText 只設置文本
            // // li1.innerText  = '<a href="#">123</a>';
            // 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);
        </script>
    </body>
</html>

一、增刪改查

1.1建立節點

            var ul = document.getElementById('box');
            // 建立節點
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');

ul.appendChild(li1);
ul.appendChild(li2);

1.2設置標籤文本內容

            var ul = document.getElementById('box');
            // 建立節點
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
             // innerText 只設置文本
            li1.innerText  = '<a href="#">123</a>';

            ul.appendChild(li1);
            ul.appendChild(li2);

元素對象.inner文本=‘內容’javascript

            var ul = document.getElementById('box');
            // 建立節點
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
            // // innerText 只設置文本
            li1.innerText  = '<a href="#">123</a>';
            li1.innerText  = 'mcw';

            ul.appendChild(li1);
            ul.appendChild(li2);

使用兩次，會被覆蓋掉css

1.三、給添加的標籤設置屬性和文本並添加子標籤

            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);

1）建立dom對象 document.getElementById('box');html

2)建立標籤對象； document.createElement('li')前端

3)標籤對象插入文本內容：li1.innerText=‘內容’；java

4）標籤對象插入html,插入子標籤： li1.innerHTML = '<a href="#">123</a>';數據庫

5）根據索引獲取子標籤位置並設置樣式： li1.children[0].style.color = 'red';後端

6）將建立的標籤追加進html文檔對象： ul.appendChild(li1);app

li1.children只有一個元素，能夠索引取值。

1.四、在某個標籤以前插入標籤 ul.insertBefore(li2,li1);

            var ul = document.getElementById('box');
            // 建立節點
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
            // // innerText 只設置文本
            // li1.innerText  = '<a href="#">123</a>';
            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);            li2.innerHTML = '第一個';
            ul.insertBefore(li2,li1);//若是li1不存在或沒有追加進去，那麼此條不執行

1.五、刪除標籤文檔對象. r移除孩子（） ul.removeChild(li2);

            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);

二、對屬性，值，節點的操做案例

for循環批量生成標籤：dom

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <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')
                 box.appendChild(li)
            }
        </script>
    </body>
</html>

將模擬從數據庫拿來的數據放在生成的標籤裏，並給標籤寫好css樣式：ide

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <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)
            }
        </script>
    </body>
</html>