html动态留言墙代码,JavaScript实现动态留言板

本文实例为大家分享了简单动态留言板的创建，供大家参考，具体内容如下

效果图展示：

思路

html代码

发表留言

css代码

* {

margin: 0;

padding: 0;

}

body {

padding: 100px;

}

textarea {

width: 200px;

height: 100px;

border: 1px solid #000;

outline: none;

resize: none;

}

ul {

margin-top: 50px;

}

li {

width: 300px;

padding: 5px;

background-color: rgb(245, 209, 243);

color: red;

font-size: 14px;

margin: 15px 0;

}

li a {

float: right;

width: 40px;

height: 20px;

text-align: center;

text-decoration: none;

background-color: #fff;

border: 1px solid #ccc;

color: #000;

}

js代码

//点击按钮之后 就动态创建一个li 添加到ul里面

//创建li的同时 把文本域里面的值通过li.innerHTML赋值给li

//获取元素

var text = document.querySelector('textarea');

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

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

//创建事件

btn.onclick = function () {

if (text.value == '') {

return false;

} else {

//1.创建li

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

//先有li 再赋值

li.innerHTML = text.value + '删除';

//2.添加li

ul.appendChild(li); //在后面追加

// ul.insertBefore(li,ul.children[0]); 动态在前面追加

//3.删除元素 删除当前链接的li 他的父亲

var as = document.querySelectorAll('a');

for(var i = 0;i

as[i].onclick = function(){

// 删除当前a的父亲li li的父亲是ul

//删除节点语法 父节点.removeChild(子节点)

ul.removeChild(this.parentNode);

}

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。