js節點的創建添加刪除

本文轉載自查看原文 2019-06-04 22:03 8676 javascript-jquery等

<!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.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文本=‘內容’

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

使用兩次，會被覆蓋掉

1.3、給添加的標簽設置屬性和文本並添加子標簽

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

2)創建標簽對象； document.createElement('li')

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

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

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

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

li1.children只有一個元素，可以索引取值。

1.4、在某個標簽之前插入標簽 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.5、刪除標簽文檔對象. 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);

2、對屬性，值，節點的操作案例

for循環批量生成標簽：

<!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樣式：

<!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>

View Code

這樣就生成了這個列表，數據庫有多少個顯示多少個。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 批量添加節點方法createDocumentFragment()方法 js創建元素節點，插入，刪除，查找，替換元素節點的寫法 jQuery里面的DOM操作（查找，創建，添加，刪除節點） C#里創建xml文件添加刪除節點 RedisCluster 添加/刪除節點單鏈表節點的添加和刪除創建、插入、刪除、查詢、替換dom節點的方法（JS實現） jq 創建與添加節點 C# treeView添加節點刪除節點 kubernetes添加刪除重啟節點為DOM節點添加或者刪除class