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. IPFS家族(一)

    IPFS这个项目其实很大,并不像大家想象的是一个东西,IPFS是由很多模块组成,每一个模块现在都已经独立成项目了,并且有自己的主页.让我们来简单看一下IPFS家族成员. 协议实验室的主页:https: ...

  2. Hibernate学习笔记一 使用idea开发工具搭建框架

    1.导包,包下载地址:http://hibernate.org/orm/downloads/ 2.创建数据库,准备表,实体.示例: CREATE TABLE `cst_customer` ( `cus ...

  3. web服务器学习4---httpd-2.4.29优化

    实验环境: 环境:CentOS 7.4 软件版本:httpd-2.4.29 一.网页压缩 1.检查是否安装压缩模块 apachectl -D DUMP_MODULES | grep deflate 如 ...

  4. 网络1711c语言第3次作业总结

    作业地址:https://edu.cnblogs.com/campus/jmu/JMUC--NE17111712/homework/1166 总结 1.评分细则 评分注意事项 注意用Markdown语 ...

  5. Beta冲刺第三天

    一.昨天的困难 没有困难. 二.今天进度 1.林洋洋:修改权限相关的资源表示,修复flex布局排版高度问题,修复文件更新问题,去除登录页面的默认账号密码,服务器部署. 2.黄腾达:修复日程首次执行时间 ...

  6. Beta冲刺NO.5

    Beta冲刺 第五天 1. 昨天的困难 1.昨天的困难主要是在类的整理上,一些逻辑理不清,也有一些类写的太绝对了,扩展性就不那么好了,所以,昨天的困难就是在重构上. 页面结构太凌乱,之前没有统筹好具体 ...

  7. 团队第1次作业：Our Team TAH

     Team named TAH    不管一个人多么有才能,但是集体常常比他更聪明和更有力. --奥斯特洛夫斯基     *introduce team and teamate 先说说TAH的含义,是 ...

  8. 项目Alpha冲刺Day8

    一.会议照片 二.项目进展 1.今日安排 前端界面框架基本完成,剩下侧边栏与权限相关部分未完成.前端路由异常拦截完成.项目结构与开发流程规定完成.后台开发规定小变更. 2.问题困难 组件的拆分与否和组 ...

  9. 201621123062《java程序设计》第七周作业总结

    1. 本周学习总结 1.1 思维导图:Java图形界面总结 1.2 可选:使用常规方法总结其他上课内容. 1.布局管理器的具体使用方法 2.事件处理模型及其代码的编写 3.Swing中的常用组件 4. ...

  10. python中使用flask时遇到的markupsafe._compat包缺失的问题与解决

    环境:windows7 + python3.6.0 在尝试使用python的flask时,按照flask的tutorial操作,装好flask.venv后,对tutorial中的hello.py进行运 ...