<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>li{background-color: blueviolet;margin-top: 10px;}</style><title>Document</title></head><body><textareaname=""id=""cols="30"rows="10">123</textarea><button>發佈</button><ul><li>123</li></ul><script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul;var li;var a;var b;// 2. 註冊事件
btn.onclick=function(){
ul = document.querySelector('ul');
li = ul.children;
a = ul.children[li.length -1].innerHTML;
b = text.value;if(text.value ==''){alert('您沒有輸入內容');returnfalse;}elseif(a == b){alert("拒絕重複發佈");}else{// (1) 創建元素var li = document.createElement('li');// 先有 li 才能賦值
li.innerHTML = text.value;// (2) 添加元素
ul.appendChild(li);/* 後面 */// ul.insertBefore(li, ul.children[0]);}}</script></body></html>
2. 改進版（可刪除）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
li {
background-color: blueviolet;
margin-top:10px;
width:20%;}
a {
display: block;float: right;}</style><title>Document</title></head><body><textarea name="" id="" cols="30" rows="10">123</textarea><button>發佈</button><ul><!--<li>123</li>--></ul><script>// 1. 獲取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul;
var li;
var a;
var b;// 2. 註冊事件
btn.onclick =function(){
ul = document.querySelector('ul');
li = ul.children;if(text.value ==''){alert('您沒有輸入內容');return false;}else{// (1) 創建元素
var li = document.createElement('li');// 先有 li 才能賦值
li.innerHTML = text.value +"<a href='javascript:;'>delate</a>";// (2) 添加元素
ul.appendChild(li);/* 後面 */
ul.insertBefore(li, ul.children[0]);}
var as = document.querySelectorAll('a');for(var i =0; i < as.length; i++){
as[i].onclick =function(){
ul.removeChild(this.parentNode);}}}</script></body></html>
