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>

转载于:https://www.cnblogs.com/guobaoyuan/p/7821831.html

JavaScript 评论添加练习相关推荐

【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
JavaScript原生添加移除class的方法
转载自 JavaScript原生添加移除class的方法 1.JavaScript原生移除class方法 window.onload = function () {var stamp = docum ...
html 如何添加附件,javascript实现添加附件功能的方法
在邮件中我们经常用到添加附件,现在简单的应用下: 效果图: 实现原理: 采用table标签的,主要思想:采用table标签方式 1.点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之 ...
javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
【JavaScript】添加DOM节点
[JavaScript]添加DOM节点原创刘甜- 最后发布于2019-03-24 19:59:39 阅读数 310 收藏展开 HTML DOM树当网页被加载时,浏览器会创建页面的文档对象模型( ...
为JavaScript日期添加天数
如何使用JavaScript将天添加到当前Date . JavaScript是否具有诸如.Net的AddDay类的内置函数? #1楼尝试 var someDate = new Date(); var ...
阅读新闻页面绑定新闻评论+添加评论+删除评论+admin页面数据分页
继上面功能之后的新功能一.添加评论首先是我们的admin界面展示其次是我们的read_news界面展示 a.首先从read_news界面的from表单跳转至doadd_ptext界面. < ...
javascript动态添加form表单元素
2019独角兽企业重金招聘Python工程师标准>>> 2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的情景: 后台要上传游戏截 ...
Javascript迄今为止添加了前导零
我已创建此脚本来以dd / mm / yyyy的格式提前10天计算日期: var MyDate = new Date(); var MyDateString = new Date(); MyDate. ...

JavaScript 评论添加练习

JavaScript 评论添加练习

本次所学内容：

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

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

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

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

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

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

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

JavaScript 评论添加练习相关推荐

最新文章

热门文章