<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function() { var oText = document.getElementById('text1'); var oBtn = document.getElementById('btn'); var oUl = document.getElementById('ul1'); oBtn.onclick = function() { //创建li元素 var oLi = document.createElement('li');//document.createElement(标签名称); 创建元素 oLi.innerHTML = oText.value; //创建a 删除元素 var oA = document.createElement('a'); oA.innerHTML = '删除'; oA.href = 'javascript:;'; //删除事件 oA.onclick = function() { oUl.removeChild( this.parentNode );//父级.removeChild(要删除的元素); 要删除元素的父级 this表示当前 } oLi.appendChild( oA ); /* 父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素 在ie下如果第二个参数的节点不存在，会报错 在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加 oUl.insertBefore( oLi, oUl.children[0] ); */ if ( oUl.children[0] ) { oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi );//父级.appendChild(要添加的元素) 方法 追加子元素 oUl.appendChild( oLi ); } } } </script> </head> <body> <input type="text" id="text1" /><input type="button" value="留言" id="btn" /> <ul id="ul1"></ul> </body> </html>