<!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生成的微博发布
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
