创建元素：document.createElement('要创建的标签名')
将元素(子级)添加到另一个元素(父级)中：元素(父级) . appendChild('子级')
将元素(子级)插入到另一个元素(另一个子级)的前面： 元素(被插入元素的父级)insertBefore(插入的新元素，被插入的元素)
替换子节点：元素(被替换节点的父级) . replaceChild(新的子节点，被替换的子节点)
删除子节点：元素(删除元素的父级) . removeChild (要删除的元素)
案例说明：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ 500px;margin: 20px auto;} h4{border-bottom: 2px solid #000;line-height: 30px;} ul{border: 1px solid #ccc;} li{list-style: none;} .li1{height: 50px;line-height: 50px;} .delete{float: right;} p{font-style: italic;} textarea{ 100%;height: 100px;resize: none;padding: 0;} input{ 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>