创建元素：document.createElement(标签名称);
删除元素：父级.removeChild(要删除的元素);
追加子元素：父级.appendChild(要添加的元素)
在指定元素前面插入一个新元素：父级.insertBefore(新的元素，被插入的元素)
HTML部分：
<body> <input type="text" id="text1"> <input type="button" id="btn" value="留言"> <ul id="ul1"></ul> </body>
JS部分：
window.onload = function(){ var oText = document.getElementById('text1'); var oBtn = document.getElementById('btn'); var oUl = document.getElementById('ul1'); oBtn.onclick = function(){ // 通过document.createElement创建li var oLi = document.createElement('li'); // 然后把文本框的value值赋给li oLi.innerHTML = oText.value; //通过document.creatElement创建a var oA = document.createElement('a'); //给a添加href和innerHMTLE oA.href = 'javascript:;'; oA.innerHTML = '删除'; //给a链接添加单击事件 oA.onclick = function() { // 父级.removeChild(要删除的元素); 删除元素 oUl.removeChild(this.parentNode); } //接着通过appendChild添加子元素 父级.appendChild(要添加的元素) oLi.appendChild(oA); // 接着清空文本框的value值 oText.value = ''; // 父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素 // oUl.insertBefore( oLi ,oUl.children[0] ); /* 兼容处理 在ie下如果第二个参数的节点不存在，会报错 在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加 */ if ( oUl.children[0] ) { oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } }; };