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. PHP实现发送模板消息到微信公众号

    简述:在这里会具体讲述到如何实现:如何通过后台的代码来实现发送模板消息到已经关注了"心想"公众号的用户. (本人新手,目前实习中,我的所有文档都是在自己开发过程中的记录,有些言语跟 ...

  2. PHP7变量的内部实现

    PHP7变量的内部实现 受篇幅限制,这篇文章将分为两个部分.本部分会讲解PHP5和PHP7在zval结构体的差异,同时也会讨论引用的实现.第二部分会深入探究一些数据类型如string和对象的实现. P ...

  3. Spring Boot 定时任务的使用

    @Configuration @EnableScheduling public class ScheduleConfig { private final Logger logger = LoggerF ...

  4. 通过jersey-client客户端调用Jersey的Web服务模拟CURD

    一.总体说明 通过jersey-client接口,创建客户端程序,来调用Jersey实现的RESTful服务,实现增.删.改.查等操作. 服务端主要是通过内存的方式,来模拟用户的增加.删除.修改.查询 ...

  5. 深入解析C语言数组和指针

    概述 指针是C语言的重点,同时也是让初学者认为最难理解的部分.有人说它是C语言的灵魂,只有深入理解指针才能说理解了C语言.暂且撇开这些观点不谈.这章是我在阅读<C和指针>这本书的读书笔记. ...

  6. [学习笔记]Javaweb开发视频教程之Tomcat9配置

    参考自北京动力节点的视频教程:https://www.bilibili.com/video/av14548279/?p=1 1.Java XE Java SE 是做电脑上运行的软件. Java EE ...

  7. 关于Redis数据库 ---- 基础篇

    Redis数据库也被称为数据结构数据库,因为存储基于key-value模式. 其中,value值可以为字符串(string),哈希(map),列表(list),集合(set)和有序集合(zset). ...

  8. 【Alpha】阶段总结报告

    团队成员 陈家权 031502107 赖晓连 031502118 雷晶 031502119 林巧娜 031502125 庄加鑫 031502147 一.项目预期计划及现实进展 项目预期计划 现实进展 ...

  9. 项目Alpha冲刺Day9

    一.会议照片 二.项目进展 1.今日安排 侧栏及相关刷新完成,项目结构小变动.个人信息和修改密码后台完成. 2.问题困难 前后台联调出现问题,配置修改了半天还没改好.好像是会话丢失,初步判断应该是后台 ...

  10. 设计模式NO.1

    设计模式NO.1 根据作业要求完成下列题目: 题目1: (1)要求:某系统日志记录器要求支持多种日志记录方式,如文件记录.数据库记录等:用户可以根据要求动态选择日志记录方式.使用Factory模式来设 ...