袖白雪 发表于 2020-3-3 13:17:34

JS结点操作

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

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.style.color = 'red';
            li1.children.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.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.style.color = 'red';
            li1.children.style.fontSize = '20px';
            ul.appendChild(li1);            li2.innerHTML = '第一个';
            ul.insertBefore(li2,li1);//如果li1不存在或没有追加进去，那么此条不执行

1.5 删除标签 (移除孩子);
            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.style.color = 'red';
            li1.children.style.fontSize = '20px';
            ul.appendChild(li1);
            // ul.appendChild(li2);
            //
            li2.innerHTML = '第一个';
            ul.insertBefore(li2,li1);
            //
            ul.removeChild(li2);



页: [1]
查看完整版本: JS结点操作