document动态操作元素
Posted cnlisiyiii-stu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了document动态操作元素相关的知识，希望对你有一定的参考价值。
（一）动态创建元素
1. 通过innerhtml创建元素
语法：元素.innerHTML = ‘内容‘;
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拼接要快。（推荐使用）
innerHTML大量拼接字符串时速度慢。
(二)动态追加元素
语法：父元素.appendChild(子元素);
函数封装注意：对于函数体中不能写死的地方用参数。
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(子元素);
confirm(); 提示是否确认删除，返回布尔值。
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>
以上是关于document动态操作元素的主要内容，如果未能解决你的问题，请参考以下文章