DOM创建移除替换元素
Posted rickyctbur
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM创建移除替换元素相关的知识，希望对你有一定的参考价值。
创建元素：document.createElement(‘要创建的标签名‘)
将元素(子级)添加到另一个元素(父级)中：元素(父级) . appendChild(‘子级‘)
将元素(子级)插入到另一个元素(另一个子级)的前面： 元素(被插入元素的父级)insertBefore(插入的新元素，被插入的元素)
替换子节点：元素(被替换节点的父级) . replaceChild(新的子节点，被替换的子节点)
删除子节点：元素(删除元素的父级) . removeChild (要删除的元素)
案例说明：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> divwidth: 500px;margin: 20px auto; h4border-bottom: 2px solid #000;line-height: 30px; ulborder: 1px solid #ccc; lilist-style: none; .li1height: 50px;line-height: 50px; .deletefloat: right; pfont-style: italic; textareawidth: 100%;height: 100px;resize: none;padding: 0; inputwidth: 100%;height: 50px;font-size: 16px; </style> </head> <body> <div id="box"> <h4>留言内容：</h4> <ul> <li class="li1">请输入内容......</li> </ul> <textarea></textarea> <input type="button" value="发表留言"> </div> <script type="text/javascript"> var box = document.getElementById(‘box‘); var Ul = box.getElementsByTagName(‘ul‘)[0]; var li1 = Ul.getElementsByClassName(‘li1‘)[0]; var button = box.getElementsByTagName(‘input‘)[0]; var Tex = box.getElementsByTagName(‘textarea‘)[0]; button.onclick = function() if(Tex.value == ‘‘ || /^\s*$/.test(Tex.value)) alert("请输入内容......"); else var str = Tex.value; if(Ul.children[0].className == ‘li1‘) Ul.innerHTML = ‘‘; //创建元素 var Li = document.createElement(‘li‘); //给元素添加内容 Li.innerHTML = str; //把元素添加到另一个元素中 Ul.appendChild(Li); var oA = document.createElement(‘a‘); oA.href = ‘javascript:;‘; oA.innerHTML = ‘删除‘; oA.className = ‘delete‘; oA.onclick = function() //删除元素 this.parentNode.remove(this.parentNode); if(!Ul.children[0]) Ul.appendChild(li1); Li.appendChild(oA); Tex.value = ‘‘; </script> </body> </html>
以上是关于DOM创建移除替换元素的主要内容，如果未能解决你的问题，请参考以下文章