JavaScript留言板

<div>

<ul>

</ul>

</div>

var btn = document.querySelector('input');

var msg = document.querySelector('#msg');

var lis = document.querySelectorAll('ul li');

var ulNode =document.querySelector('ul');

btn.onclick = function(){

var limsg = msg.value +'时间：'+ new Date().toLocaleString();

// console.log(limsg);

if(msg.value==''){

alert('请输入内容');

return;

}

limsg = limsg+'<a href="javascript:;">删除</a>';

// console.log(limsg);

//创建li标签节点

var li = document.createElement('li');

li.innerHTML =limsg;

//插入li标签节点

//再ul标签的最前面插入li标签

ulNode.insertBefore(li,ul.children[0]);

}

//删除列表

// for (var i = 0; i < lis.length; i++) {

// lis[i].addEventListener('click',function(e){

// // console.log(e.target);

// alert('点击了');

// // 注意直接这样写是不行的默认的li标签监听事件加上了但是后面新提交的信息没有加上所以我们的监听事件需要绑定给父级标签 ul 然后通过事件对象来获得当前的对象

// })

// }

ulNode.addEventListener('click',function(e){

console.log(e.target);//指向就是a标签

// 我们通过a标签获得父级li标签 e.target.parentNode

var delLi = e.target.parentNode;

// 通过ul标签移除li标签

// ulNode.removeChild(delLi);

this.removeChild(delLi);

})

</script>

JavaScript留言板相关推荐

JavaScript留言板效果
1.通过JS的createElement实现留言板效果: 2.源码如下:
JavaScript网页特效-留言板
留言板是一种可以用来记录.展示文字信息的载体,有比较强的时效性.网站中的留言板功能非常重要,可以实现和用户互动,例如人民网的"领导留言板"."领导留言板"是人民 ...
JavaScript实现留言板
目录 1.案例说明: 2.html部分 3.css部分 4.js代码 5.全部代码 6.效果图: 1.案例说明: 利用JavaScript.css以及html制作一个简易的留言板要求在页面文本框中输 ...
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
JavaScript用事件委托实现留言板功能
用事件委托实现留言板功能. <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分效果预览 html部分 <textarea name="text" cols="3 ...
JavaScript之留言板制作
本文主要介绍留言板的制作,用户可对新闻消息进行评论,发表之后评论会被置于顶端,点击相应删除按钮即可删除.本文主要介绍三种方式,区别在于如何实现评论的删除. 1.利用函数局部作用域在函数的局部作用域内 ...
使用JavaScript DOM制作简单留言板
效果图: 先准备html代码: <body><textarea name="" id=""></textarea><b ...
使用JavaScript备份QQ空间的留言板数据
内容转载自我的博客文章目录 1. 目标网站 2. 保存浏览器调试窗口的变量到本地文件 3. 编写代码 4. 备份完成 5. 后记 1. 目标网站此代码是专门为了备份本人的QQ空间留言板的数据而编写 ...

JavaScript留言板

JavaScript留言板相关推荐

最新文章

热门文章