代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<input type="text"><input type="button" value="請留言">
<ul></ul>
<script>
//獲取頁面元素
var oInp = document.querySelectorAll('input');
var oUl = document.querySelector('ul');
//給按鈕添加點擊事件
oInp[1].onclick = function(){
//獲取文本框中的內容
var str = oInp[0].value;
//創建li
var oLi = document.createElement('li');
//創建文本節點
var oTxt = document.createTextNode(str);
oLi.appendChild(oTxt);
//創建a
var oA = document.createElement('a');
oA.href = "javascript:;"//將a作為js中的按鈕用,不再跳轉
//設置a中的內容
oA.innerHTML = '刪除';
oA.onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
oLi.appendChild(oA);
if(oUl.firstChild){
oUl.insertBefore(oLi,oUl.firstChild);
}else{
oUl.appendChild(oLi);
}
}
</script>
</body>
</html>