<!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() { /* document.createElement(标签名称); 创建元素 */ var oLi = document.createElement('li'); //oLi.innerHTML = oText.value + '<a href="javascript:;">删除</a>'; oLi.innerHTML = oText.value; var oA = document.createElement('a'); oA.innerHTML = '删除'; oA.href = 'javascript:;'; oA.onclick = function() { /* 父级.removeChild(要删除的元素); 删除元素 */ oUl.removeChild( this.parentNode ); } oLi.appendChild( oA ); //添加到页面中 /* 父级.appendChild(要添加的元素) 方法 追加子元素 */ //oUl.appendChild( oLi ); /* 父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素 在ie下如果第二个参数的节点不存在，会报错 在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加 */ //oUl.insertBefore( oLi, oUl.children[0] ); if ( oUl.children[0] ) { oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } } } </script> </head> <body> <input type="text" id="text1" /><input type="button" value="留言" id="btn" /> <ul id="ul1"></ul> </body> </html>