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. nodejs简单数据迁移demo

    近期做数据迁移,采用nodejs框架,数据库为mysql.作为一枚菜鸟,在编码过程中,遇到众多奇葩问题,感谢民少给予的支持. 由于旧数据库中的数据,在之前设计中存在众多不合理的情况,因此在数据迁移中, ...

  2. 用bat文件启动mongodb

    bat文件是dos下的批处理文件.批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命令提示下键入批处理文件的名称,或者双击该批处理文件,系统就会调用cm ...

  3. 配置Hibernate的二级缓存

    1.在applicationContex.xml文件里面添加二级缓存配置: <!-- 配置hibernate的sessionFactory --> <bean id="se ...

  4. [poj2406]Power Strings_hash

    Power Strings poj-2406 题目大意:询问一个字符串最多几个相同且连续的字符串构成(Eg:abababab由4个构成,abcd由1个构成). 注释:字符串长度为n,$1\le n\l ...

  5. 为什么说android UI操作不是线程安全的

    转载于:http://blog.csdn.net/lvxiangan/article/details/17218409#t2 UI线程及Android的单线程模型原则 使用Worker线程 Commu ...

  6. SQL中的DML、DDL以及DCL

    DML(data manipulation language)是数据操纵语言:它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的 ...

  7. 记录python接口自动化测试--把操作excel文件的方法封装起来(第五目)

    前面补充了如何来操作excel文件,这次把如何获取excel文件的sheet对象.行数.单元格数据的方法进行封装,方便后面调用 handle_excel.py# coding:utf-8 import ...

  8. beta冲刺5

    昨天的问题: 登陆页面的整合重新制作 各主机版本更迭 我的社团显示功能修改调整 主页的头部替换掉 +修复帖子无法显示内容的问题 +试着将邮箱等判定用正则表达式进行实时判定. 今天的完成: 主要是线下进 ...

  9. C语言程序设计第三次作业--选择结构（1）

    Deadline: 2017-10-29 22:00 一.学习要点 掌握关系运算符和关系表达式 掌握如何判断两个实数相等 掌握常用数学函数的使用 掌握逻辑运算符和逻辑表达式 理解逻辑运算的短路特性 掌 ...

  10. 关于FPGA随笔

    verilog与c