js 简单版发布留言 案例
<!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>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>提交</button>
<ul>
</ul>
<script>
//获取元素
var textarea = document.querySelector('textarea');
var btn = document.querySelector('button')
var ul = document.querySelector('ul')
//绑定事件
btn.onclick = function(){
if (textarea.value === ''){
alert('内容不能为空，请入内容')
}else{
var li = document.createElement('li');// 创建li元素
ul.appendChild(li) //增加元素节点
li.innerHTML=textarea.value + "<a href='javascript:;'>删除</a>" ; //赋值元素内容，并且增加删除按钮 JavaScript:;防止跳转
var as = document.querySelectorAll('a'); // 思路：删除当前元素的父元素，因为它包含了a和li内容，也就是li
for (var i =0 ;i<as.length;i++){
as[i].onclick = function(){
//node.removeChild(child); 删除的是li 当前a所在的li this.parentNode
ul.removeChild(this.parentNode)
}
}
}
}
</script>
</body>
</html
知识点总结：
1.创建元素节点
var li = document.createElement('li')
2.增加节点 node.appenChild(child) node父级 child是子级 此操作为追加元素
var ul = document.querySelector('ul');
ul.appendChild('li');
3.增加节点 node.insertBefore(child,指定元素)
var lili = document.createElement('li')；
ul.insertBefore(lili,ul.children[0]);
过程：1.创建元素 2.添加元素，指定添加的位置
4.删除节点 node.removeChild(child)
var ul = document.querySelector('ul'); //获取元素
ul.removeChild(ul.children[0]); //删除元素
注意：删除父节点中的某一个子节点
5.复制节点 node.clone.Node()
var ul = docment.querySelect('ul')
//node.cloneNode();括号为空或者里面是false 浅拷贝，只是复制里面的标签，并不复制内容
//如果想深拷贝，也就是连同内容一起拷贝的话，在括号内增加一个true即可 即node.cloneNode(true);
var lis = ul.children[0].cloneNode();//拷贝第一个li的标签
ul.appendChild(lis); //追加一个复制的标签及内容
浙公网安备 33010602011771号