语法：元素.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; //原有的li12 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 // 移除第二li10 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 // 创建一个新的li17 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动态 *** 作元素全部内容，希望文章能够帮你解决document动态 *** 作元素所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）