JavaScript 評論添加練習
阿新 • • 發佈：2017-11-12
charset 子節點 parent pen 點擊 node tar ner query
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 評論添加練習