document动态操做元素

时间 2019-11-11

标签 document 动态元素繁體版

原文原文链接

（一）动态建立元素

1. 经过innerHTML建立元素

语法：元素.innerHTML = '内容';app

 1 <body>
 2     <button>add</button>
 3     <ul>
 4         <li>列表项</li>
 5     </ul>
 6     <script>
 7     //更新ul中的内容，动态添加li
 8     var btn = document.querySelector('button');
 9     var ul = document.querySelector('ul');
10     btn.onclick = function() {
11         var old = ul.innerHTML; //原有的li
12         ul.innerHTML = old + '<li>new list</li>';
13     }
14     </script>   
15 </body>

innerHTML适用于少许的拼接，由于字符串大量拼接时有性能问题。函数

2. 经过document.createElement建立元素

语法：document.createElement('标签名'); //返回一个新的元素对象性能

 1 <body>
 2     <button>add</button>
 3     <ul>
 4         <li>列表项</li>
 5     </ul>
 6     <script>
 7     //更新ul中的内容，动态添加li
 8     var btn = document.querySelector('button');
 9     var ul = document.querySelector('ul');
10     btn.onclick = function() {
11       var newChild = document.createElement('li'); 
12       newChild.innerText = '新元素';  //设置内容，给谁设置谁就点
13       ul.appendChild(newChild);  //追加元素
14     };
15     </script>   
16 </body>

3. 两种方法比较

createElement不须要拼接，会自动追加到下一项。运行速度比innerHTML拼接要快。（推荐使用）spa

innerHTML大量拼接字符串时速度慢。code

(二)动态追加元素

语法：父元素.appendChild(子元素);对象

函数封装注意：对于函数体中不能写死的地方用参数。blog

 1 <button>建立li</button>
 2 <ul>
 3 <li>我是li</li>
 4 </ul>
 5 <script>
 6     var btn = document.querySelector('button');
 7     var ul = document.querySelector('ul');
 8     btn.onclick = function() {
 9       // 建立一个新的li元素
10       var newLi = document.createElement('li');
11       // 追加
12       ul.appendChild(newLi);
13       // 设置内容
14       newLi.innerText = '我是新来的li';
15     };
16 </script>

（三）删除元素

语法：父元素.removeChild(子元素); ip

confirm(); 提示是否确认删除，返回布尔值。rem

 1 <ul>
 2 <li>我是li1</li>
 3 <li class="li2">我是li2</li>
 4 <li>我是li3</li>
 5 </ul>
 6 <script>
 7     var ul = document.querySelector('ul');
 8     var li2 = document.querySelector('.li2');
 9     // 移除第二li
10     ul.removeChild(li2);
11 </script>

（四）其余元素

1. 插入元素

语法：父节点.insertBefore(新的节点,旧的子节点)字符串

2. 替换元素

语法：父节点.replaceChild(新的节点,旧的子节点)

3. 克隆元素

语法：元素.cloneNode(true或false); 返回一份新的克隆后的元素，默认值false

true，克隆该元素的全部内容
false，仅仅克隆外层标签

 1 <ul>
 2     <li>我是li1</li>
 3     <li>我是li2</li>
 4     <li>我是li3</li>
 5 </ul>
 6 <div>
 7     <h2>我是div中的标题</h2>
 8     <span>我是span</span>
 9     <button>按钮</button>
10     <p>段落</p>
11 </div>
12 
13 <script>
14     var ul = document.querySelector('ul');
15     var oldLi = ul.children[0];
16     // 建立一个新的li
17     var newLi = document.createElement('li');
18     newLi.innerText = '我是新的li';
19     // 【插入】
20     // ul.insertBefore(newLi,oldLi);
21     // 替换
22     // ul.replaceChild(newLi,oldLi);
23     // 【获取div】
24     var div = document.querySelector('div');
25     // 【克隆】
26     // var newDiv = div.cloneNode(); // 默认是false，表示仅仅克隆外层标签
27     var newDiv = div.cloneNode(true); // 如果true，会克隆该元素的全部内容
28     document.body.appendChild(newDiv);
29 </script>