<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
margin: 100px auto;
width: 600px;
height: auto;
border: 1px solid #333;
padding: 30px 0;
}
textarea {
width: 450px;
resize: none; /*防止用户拖动右下角*/
}
.box li {
width: 450px;
line-height: 30px;
border-bottom: 1px dashed #ccc;
margin-left: 80px;
}
.box li a {
float: right;
}
</style>
</head>
<body>
<div class="box">
微博发布：<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发送</button>
</div>
</body>
<script>
var btn=document.getElementsByTagName('button')[0];
var txt=document.getElementsByTagName('textarea')[0];
var ul=document.createElement('ul');//创建ul
btn.parentNode.appendChild(ul);//追加到他的父亲里面
btn.onclick=function(){
if(txt.value==''){
alert('输出不能为空');
return false; //终止函数执行
}
var newli=document.createElement('li');
newli.innerHTML=txt.value+"<a href='javascript:;'>删除</a>"; //把表单的值给新li
txt.value='';//清空表单
var lis=ul.children;//获得有多少个li
//if else这个片段让我们新发布的内容最上显示
//第一次创建
if(lis.length==0){
ul.appendChild(newli);//ul的后面追加
}else{
ul.insertBefore(newli,lis[0]);//每次生成的新的li放到第一个li的前面
}
var as=document.getElementsByTagName('a');//获得新的a标签
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
//removeChild
ul.removeChild(this.parentNode);//ul 他的爸爸
//a 的爸爸是li
}
}
}
</script>
</html>
html与js生成的微博发布
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
