JS结点操作

袖白雪

1. 增删改查
1.1 创建结点

1. var ul = document.getElementById('box');
   
2. // 创建节点
   
3. var li1 = document.createElement('li');
   
4. var li2 = document.createElement('li');
   
5. 　　　　　　　　
   
6. ul.appendChild(li1);
   
7. ul.appendChild(li2);

复制代码

1.2 设置文本内容

1. var ul = document.getElementById('box');
   
2.             // 创建节点
   
3.             var li1 = document.createElement('li');
   
4.             var li2 = document.createElement('li');
   
5.              // innerText 只设置文本
   
6.             li1.innerText  = '<a href="#">123</a>';
   
7. 
   
8.             ul.appendChild(li1);
   
9.             ul.appendChild(li2);

复制代码

1. var ul = document.getElementById('box');
   
2.             // 创建节点
   
3.             var li1 = document.createElement('li');
   
4.             var li2 = document.createElement('li');
   
5.             // // innerText 只设置文本
   
6.             li1.innerText  = '<a href="#">123</a>';
   
7.             li1.innerText  = 'mcw';
   
8. 
   
9.             ul.appendChild(li1);
   
10.             ul.appendChild(li2);

复制代码

1.3 给设置好的标签增加属性并设置子标签

1.             var ul = document.getElementById('box');
   
2.             // 创建节点
   
3.             var li1 = document.createElement('li');
   
4.             var li2 = document.createElement('li');
   
5.             li1.innerHTML = '<a href="#">123</a>';
   
6.             li1.setAttribute('class','active');
   
7.             console.log(li1.children);
   
8.             li1.children[0].style.color = 'red';
   
9.             li1.children[0].style.fontSize = '20px';
   
10.             ul.appendChild(li1);
    
11.             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);

1.             var ul = document.getElementById('box');
   
2.             // 创建节点
   
3.             var li1 = document.createElement('li');
   
4.             var li2 = document.createElement('li');
   
5.             // // innerText 只设置文本
   
6.             // li1.innerText  = '<a href="#">123</a>';
   
7.             li1.innerHTML = '<a href="#">123</a>';
   
8.             li1.setAttribute('class','active');
   
9.             console.log(li1.children);
   
10.             li1.children[0].style.color = 'red';
    
11.             li1.children[0].style.fontSize = '20px';
    
12.             ul.appendChild(li1);            li2.innerHTML = '第一个';
    
13.             ul.insertBefore(li2,li1);//如果li1不存在或没有追加进去，那么此条不执行

复制代码

1.5 删除标签 (移除孩子);

1.             var ul = document.getElementById('box');
   
2.             // 创建节点
   
3.             var li1 = document.createElement('li');
   
4.             var li2 = document.createElement('li');
   
5.             li1.innerHTML = '<a href="#">123</a>';
   
6.             li1.setAttribute('class','active');
   
7.             console.log(li1.children);
   
8.             li1.children[0].style.color = 'red';
   
9.             li1.children[0].style.fontSize = '20px';
   
10.             ul.appendChild(li1);
    
11.             // ul.appendChild(li2);
    
12.             //
    
13.             li2.innerHTML = '第一个';
    
14.             ul.insertBefore(li2,li1);
    
15.             //
    
16.             ul.removeChild(li2);

复制代码