JavaScript 评论添加练习
Posted 不苦不累, 人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 评论添加练习相关的知识，希望对你有一定的参考价值。
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 评论添加练习的主要内容，如果未能解决你的问题，请参考以下文章