JavaScript 評論添加練習

來源:互聯網
上載者:User

標籤:parent   har   相等   使用者   set   使用   等於   rem   rtb   

JavaScript 評論添加練習本次所學內容://var str = ‘<li>‘+value+‘</li>‘;支付串和變數的拼接 //ul.innerHTML += str;使用+=就相等於一個追加的功能如果是字串的資料想要轉換成JSON資料就可是使用JSON.parse()方法將這個轉換成JSON資料。  parse裡面存放的是要轉化的資料類型
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3.仿照微博.html</title></head><body><textarea></textarea><button>發表評論</button><ul><!-- <li>123</li> --></ul></body><script>//1.擷取對象var textarea = document.querySelector(‘textarea‘);var btn = document.querySelector(‘button‘);var ul = document.querySelector(‘ul‘);//2.‘點擊按鈕‘,就將‘使用者輸入的資訊‘‘寫入到ul列表中‘。(3個小步驟)//點擊事件btn.onclick = function(){//(1)擷取使用者輸入的資訊var value = textarea.value;//(1-1)建立li節點var li = document.createElement(‘li‘);li.innerHTML = value;//console.log(li);//(1-4)建立a標籤(刪除)var a = document.createElement(‘a‘);a.href="javascript:;";a.innerHTML = "刪除";//(1-5)li追加一個a標籤li.appendChild(a);//(1-2)擷取ul的第一個節點var firstNode = ul.firstElementChild || ul.firstChild;console.log(firstNode);//(1-3)在第一個前添加ul.insertBefore(li,firstNode)//(2)寫入到ul列表中//var str = ‘<li>‘+value+‘</li>‘;//ul.innerHTML += str;//3.點擊新建立的a連結,刪除當前的li標籤a.onclick = function(){//找li節點 —— 通過a節點找li父節點var li = this.parentNode;//console.log(li);//刪除子節點//ul.removeChild(li節點);ul.removeChild(li);}}// 註:ul.firstElementChild 這個尋找第一個標籤沒有的話是一個文字標籤  ul.firstChild 這個尋找第一個標籤沒有的話是一個null// 所以在第一個添加的時候,insertBefore會將文字標籤和null當做第一個標籤</script></html>

  

JavaScript 評論添加練習

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.