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>

View Code

这样就生成了这个列表，数据库有多少个显示多少个。