<!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>