JavaScript 评论添加练习

本次所学内容：

//var str = '<li>'+value+'</li>';

支付串和变量的拼接 //ul.innerHTML += str;

使用+=就相等于一个追加的功能

如果是字符串的数据想要转换成JSON数据

就可是使用JSON.parse()方法将这个转换成JSON数据。  parse里面存放的是要转化的数据类型

如果是JSON数据想要转换成字符串的数据

就可是使用JSON.stringify()方法将JSON数据转换成字符串数据。  stringity方法里面存放的是要转化的数据类型

<!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 评论添加练习的更多相关文章

  1. (GoRails)使用vue和Vuex管理嵌套的JavaScript评论, 使用组件vue-map-field

    嵌套的JavaScript评论 Widget Models 创建类似https://disqus.com/ 的插件 交互插件: Real time comments: Adapts your site ...

  2. return array 评论添加状态和提示信息

    ThinkSNS漏洞系列第一弹,某处处理不当导致SQL注入 漏洞点出现在Comment Widget里:\addons\widget\CommentWidget\CommentWidget.class ...

  3. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  5. 如何将 JavaScript 代码添加到网页中，以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

  6. JavaScript基础——添加错误处理

    JavaScript编程的一个重要组成部分,是添加错误处理来应对可能会出现的问题.默认情况下,如果因为你的JavaScript中的问题二产生了一个代码异常,那么脚本就会失败并且无法完成加载.这通常不是 ...

  7. javascript动态添加本地文件列表信息

    工作需要做了一个动态添加列表页面的小demo.用到了杂七杂八的javascript小知识. 而且并没有涉及到工作中的具体情境.有些通用,所以暂且罗列到这里.以后需要的时候可以直接拿来用. 看源码总是让 ...

  8. javascript动态添加form表单元素

    2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...

  9. javascript动态添加一组input

    2013年12月18日 20:56:29 场景: 批量添加 友情链接 功能 每个友情链接记录有3个字段:名字(name),超链接(url),排序(order) 要求每次点击"添加" ...

随机推荐

  1. 需求分析---NABCD

    N(Need,需求) 我们的产品未来天气,是为了解决不爱看天气预报的群众开发一款类似备忘录式的天气预报软件.很多人认为今天天气很好,明天肯定不会差,但是风云忽变,可能明天就降大雨,所以就忽略了带伞, ...

  2. async generator promise异步方案实际运用

    es7 async方案 /******************async***********************/ var timeFn=function(time){ return new P ...

  3. 安装VMware workstation遇到的两个问题：安装过程中的DLL问题和安装后打开需要的管理权限问题

    1.安装过程中遇到Microsoft runtime DLL安装程序未能完成安装的问题? 在遇到这个问题时不要点击确定,需要在开始菜单中输入%temp%,然后跳转到一个文件夹里,找到后缀为setup的 ...

  4. 【Python】 编码,en/decode函数以及print语句的一些探索

    昨天晚上在整理hashlib和hmac模块的时候,又看到了编码这块的内容.越看越觉得之前的理解不对,然后想研究一下自己想出来,但是越陷越深..总之把昨晚+今天一个上午的这些自己想到的东西写下来 ● 几 ...

  5. 分布式代码管理系统GIT

    1.1Git安装 CentOS上   yum install -y epel-release; yum install git Ubuntu上    apt-get install git Windo ...

  6. mysqldump 备份脚本

    #!/bin/bash DUMP=/usr/bin/mysqldump OUT_DIR=/home/mysql LINUX_USER=root DB_NAME=snale DB_USER=root D ...

  7. C# 入门经典

    C#简介 使用.NETFrmework的含义 使用.NETFrmework的一个重要原因是他可以作为集成各种操作系统的方式 包含了一个非常大的代码库 除了提供这个库以外.NETFrmework还包含. ...

  8. selenium2自动化测试学习笔记（五）-参数化编程，自动登陆网易QQ邮箱

    学习python下使用selenium2自动测试第6天,参数化编程这节课花了两天时间. 本次编程主要时间是花在熟悉python上 知识点or坑点: 1.读取txt.xml.csv等文件存储的账号.密码 ...

  9. JavaScript(第十七天)【浏览器检测】

    由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能:但在现实中,浏览器之间的差异,以及不同浏 ...

  10. 用C语言协助办公_01 找出所有不对劲的人

    近期想出一系列用C语言协助办公的视频教程,这是第一个.具体的移步:https://chuanke.baidu.com/v6658388-240377-1789288.html