JavaScript实现简单版的留言发布与删除
首先用户在输入框中输入内容，按下发布按钮，内容到下面的li中，并且清空输入框中的内容
下面这个li元素就是后面创建的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
resize: none;
border: 1px solid pink
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
//点击发布按钮，获取文本域中的文本，给下面新创建li中的值
//获取文本框元素、按钮元素
var text = document.querySelector('textarea')
var btn = document.querySelector('button')
var ul = document.querySelector('ul')
//当按下按钮后就创建新的li元素,放到ul的后面
btn.onclick = function() {
//创建li元素 因为是每按一次按钮，下面就会添加一个li，需要用到循环
//需要判断，当文本框里面的内容为空时，按下按钮是不会添加的
if (text.value != '') {
var li = document.createElement('li')
ul.appendChild(li)
//添加节点
//赋值li里面的内容
li.innerHTML = text.value
//按下按钮后，文本框里面的值要清空
text.value = ''
}
}
</script>
</body>
</html>
分析：
1、点击按钮后，就动态创建一个li，添加到ul里面
2、创建li的同时，把文本域中的值通过li.innerHTML赋给li
3、如果想把新的留言显示到后面就用appendChild，如果显示到前面就用insertBefore
怎么实现放在前面：
并且实现删除留言的案例：
添加li后面对应添加一个删除按钮
1、把文本域的值赋值给li的同时多加一个删除的链接
2、需要把每个链接获取过来，当点击某一个链接的时候，删除当前链接所在的li;也就是当前链接的父亲
3、阻止链接跳转可以添加javascript:void(0),或者javascript:;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
resize: none;
border: 1px solid pink
}
li {
background-color: pink;
margin-top: 2px;
width: 630px;
height: auto;
line-height: 30px;
}
p {
font-size: 15px;
margin-top: 0px;
float: left;
}
button {
width: 50px;
height: 30px
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
<script>
//点击发布按钮，获取文本域中的文本，给下面新创建li中的值
//获取文本框元素、按钮元素
var text = document.querySelector('textarea')
var btn = document.querySelector('.btn')
var ul = document.querySelector('ul')
console.log()
//当按下按钮后就创建新的li元素,放到ul的后面
btn.onclick = function() {
//创建li元素 因为是每按一次按钮，下面就会添加一个li，需要用到循环
//需要判断，当文本框里面的内容为空时，按下按钮是不会添加的
if (text.value != '') {
var li = document.createElement('li')
//li里面创建一个p放内容
// var p = document.createElement('p')
// var dele = document.createElement('button')
// ul.appendChild(li)
ul.insertBefore(li, ul.children[0])
//在li里面添加p
// console.log(ul.children[0])
// ul.children[0].appendChild(p)
//在li里面添加删除按钮
// ul.children[0].appendChild(dele)
//添加节点
//赋值li里面的内容
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
// dele.innerHTML = '删除'
// dele.style.float = 'right'
//按下按钮后，文本框里面的值要清空
text.value = ''
//删除元素，删除的是li,当前a链接的父亲
var as = document.querySelectorAll('a')
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
//node.removeChild(child)
// this.parentNode li 父亲为ul
ul.removeChild(this.parentNode)
}
} //这个循环操作为什么放在按钮点击事件外面就不会起作用
}
}
</script>
</body>
</html>
到此这篇关于JavaScript实现简单版的留言发布与删除的文章就介绍到这了,更多相关JavaScript留言发布删除内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript DOM实现简单留言板
本文实例为大家分享了JavaScript DOM实现简单留言板的具体代码,供大家参考,具体内容如下 效果图: 先准备html代码: <body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> </body> css代码如下: <style>
-
JS实现简易留言板增删功能
本文实例为大家分享了JS实现留言板增删功能的具体代码,供大家参考,具体内容如下 ## **JS实现简易留言板的增删功能** 一个很简单的留言板,实现**增删**功能,因为没有数据库,所以只是一个静态的留言板功能. **修改**功能其实也可以添加,但是我现在技术不够,等以后可能会添加**修改**功能. 代码很简单,注释很清楚.``` <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu
-
JavaScript实现动态留言板
本文实例为大家分享了简单动态留言板的创建,供大家参考,具体内容如下 效果图展示: 思路 html代码 <textarea name="" id="" cols="30" rows="10"></textarea> <button>发表留言</button> <ul></ul> css代码 <style> * { margin: 0; paddi
-
基于JavaScript实现留言板功能
本文实例为大家分享了JavaScript实现留言板功能的具体代码,供大家参考,具体内容如下 html代码 <div id="main" class="main"> <ul id="content" class="content"> <li class="msgContent left">hello?</li> <div style="clear
-
一篇文章告诉你如何用事件委托实现JavaScript留言板功能
用事件委托实现留言板功能. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
-
js实现web留言板功能
本文实例为大家分享了js实现web留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input type="text" id="mood"/><br/> 笔记:<br/> <textarea id="network"></textarea><br/> <button id="send&q
-
javascript实现留言板功能
本文实例为大家分享了javascript实现留言板功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ /*设置最外层盒子*/ width:
-
JavaScript实现简单版的留言发布与删除
首先用户在输入框中输入内容,按下发布按钮,内容到下面的li中,并且清空输入框中的内容 下面这个li元素就是后面创建的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
-
JavaScript实现留言板添加删除留言
本文分享一个JavaScript的留言板添加留言.删除留言的小案例,内附详细代码分析.但不涉及数据库操作,只解析底层代码实现思路: 实现效果 运行代码界面: 输入留言进行添加:(最新的留言会在最顶部显示) 删除留言:(点击哪条则删除该条留言) 主要功能效果展示完毕,HTML和CSS样式这里不影响,下面直接上JS代码: <script> // 获取所需元素对象 var text = document.querySelector('textarea'); var btn = document.qu
-
HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)
刮刮乐想必大家都玩过,小时候兜里一有钱,就喊上小伙伴兴冲冲的跑去家旁边的小卖部,用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱,满眼期待的刮着买来的刮刮乐,心里早已想好中了100块钱大钞要去买好多好多辣条.卡片.陀螺.奥迪双钻的悠悠球- 认认真真看完本文,你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦!(当然如果你没有女朋友的话,也可以用你珍藏多年的美女图片哦!) ⛳️使用HTML.CSS和JavaS实现刮刮卡/刮刮乐 ♥️别着急,先看演示
-
原生JavaScript实现网页版计算器
本文实例为大家分享了JavaScript实现网页版计算器的具体代码,供大家参考,具体内容如下 由于无聊看电脑上的系统软件翻到了计算器这个功能,就简单写一下这个计算器的功能吧,这个网页版计算器基本功能都有吧,但是不是很完全,仅供参考. 首先是网页计算器的样式部分不想手写直接复制即可 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <
-
JavaScript实现网页版的五子棋游戏
本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码,供大家参考,具体内容如下 根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机上写出来的一个简单五子棋,很简单的功能,许多功能都没有实现,写的过程中也遇到很多问题,现在的代码中也存在一些问题,比如电脑下棋时没有下到最右边和最下边,改来改去也还没试出电脑下最右边和最下边一排的情况,但每一个字符都是自己敲出来的,清楚他们的功能,还是很有成就感的!先看下概貌吧! 上代码 <html> <
-
原生JavaScript编写canvas版的连连看游戏
本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos
-
基于JavaScript实现简单的随机抽奖小程序
对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效
-
JavaScript实现简单的四则运算计算器完整实例
本文实例讲述了JavaScript实现简单的四则运算计算器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>computer</title> <script> function compute(){ str1=Number
-
javascript实现简单的ajax封装示例
本文实例讲述了javascript实现简单的ajax功能封装.分享给大家供大家参考,具体如下: function ajax(obj){ var xhr = (function (){//获取xhr对象,为了兼容ie6所以进行了重新封装 if(typeof XMLHttpRequest !='undefined') { return new XMLHttpRequest(); }else if(typeof ActiveXObject !='undefined') { var version =
-
javascript实现简单的可随机变色网页计算器示例
本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META