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. Maven-10: 使用maven-help-plugin描述插件

    除了访问在线的插件文档之外,还可以借助maven-help-plugin来获取插件的详细信息.可以运行如下命令来获取maven-compiler-plugin2.1版本的信息: [INFO] Scan ...

  2. Linux 绝对路径与相对路径

    根据文件名写法的不同,可将所谓的路径(path)定义为绝对路径(absolute)和相对路径(relative). 绝对路径:由根目录(/)开始写起的文件名或目录名称. 相对路径:相对于当前路径的文件 ...

  3. MYSQL数据库学习八 触发器的操作

    8.1 触发器 在表发生更改时,自动进行一些处理.例如,学生表中每增加一条关于学生记录时,学生的总数就必须同时改变,同时需要检查电话号码格式是否正确,地址缩写是否正确. 以下语句会激活触发器: DEL ...

  4. Ajax与服务器（JSON）通信介绍

    本文主要介绍使用Ajax与服务器(JSON)通信方法,谈谈Ajax提供的两类服务器通信手段:同步通信和异步通信.有需要的可以了解一下.毕竟这个时代出了很多东西,自动化构建工具,mvvm框架等等.Jav ...

  5. 【Flask】 flask-socketio实现WebSocket

    [flask-socektio] 之前不知道在哪个场合下提到过如何从web后台向前台推送消息.听闻了反向ajax技术这种模式之后,大呼神奇,试了一下之后发现也确实可以用.不过,反向ajax的代价也很明 ...

  6. c# 基于FTP协议的简易软件自动升级程序

    最近在重写了一个老的产品条码扫描程序,客户端数越有30个,因为经常有更新,C/S维护非常不方便,所以做一个自动更新程序特别有必要. 在网上随便找了找自动更新的方案,大多使用VS的发布/更新功能,不太喜 ...

  7. Mysql的执行计划各个参数详细说明

    执行计划各个参数的说明 1.id 主要是用来标识sql的执行顺序,如果没有子查询,一般来说id只有一个,执行顺序也是从上到下 2.select_type 每个select子句的类型 a:  simpl ...

  8. Unity发布WebGL时如何修改默认的载入进度条

    Unity发布WebGL版本后,需要去除Unity的Logo,首先关闭Splash Image去除Made with Unity启动画面(在File->Build Settings->Pl ...

  9. 一个基于H5audio标签的vue音乐播放器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. gitignore忽略规则

    我们用git提交本地代码时,有些文件或日志是不需要提交的,这个时候可以用.gitignore来解决这个问题: 首先,我们需要创建一个.gitignore文件,用命令输入 touch .gitignor ...