码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 评论添加练习

时间:2017-11-12 17:31:09      阅读:169      评论:0      收藏:0      [点我收藏+]

标签: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 评论添加练习

标签:parent   har   相等   用户   set   使用   等于   rem   rtb   

原文地址:http://www.cnblogs.com/guobaoyuan/p/7821831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!