js节点的创建添加删除

 

 

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

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

 

posted @ 2019-06-04 22:03  马昌伟  阅读(19857)  评论(2编辑  收藏  举报