微博发布功能,可发布可删除。样式没设置忽略,<强>主要知识点及注意点:
<强> 1,动态添加节点标签。
<强> 2,内容为空时不能发布。
<强> 3,新发布的内容要在上面。
<强> 4,内容删除要同时删除掉节点。
<强> 5,为保持样式输入框要设置为不可拖拽。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
*{保证金:0;填充:0;}
.box {
边界:1 px固体# 000;
宽度:600 px;
高度:汽车;
保证金:100 px的汽车;
填充:30 px 0;
}
textarea {
宽度:450 px;
调整:没有;
margin-left: 20 px;
}
ul李{
宽度:450 px;
list-style:没有;
边界底部:1 px点缀# ccc;
margin-left: 20 px;
行高:30 px;
颜色:# 333;
}
ul李的{
浮:正确;
字体大小:12 px;
}
& lt;/style>
& lt;脚本src=" https://www.yisu.com/jquery-1.11.1.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
1//方法
窗口。onload=function () {
var盒=. getelementbyid(“盒”);
男孩var=box.children;
var ul=document.createElement (“ul”);
box.appendChild (ul);
男孩[2]。onclick=function () {
如果男孩[1].valuehttps://www.yisu.com/zixun/==" ") {
alert("输入不能为空");
返回;
}
var newli=document.createElement(“李”);
男孩newli.innerHTML=[1] value +”& lt; a href=' javascript:,“在删除& lt;/a>”;
男孩[1]。值=" ";
var lis=ul.children;
如果(lis.length==0) {ul.appendChild (newli);}{其他
ul。方法(newli, [0]);
}
var=document.getElementsByTagName (“a”);
我(var=0; i< as.length;我+ +){
[我].onclick=function () {
ul.removeChild (this.parentNode);
}
}
}
}//方法2引用jQuery//$(函数(){//$ (" & lt; ul> & lt;/ul>”) .appendTo(“#盒子”);//var文本=美元(“#盒子”);(“文本区域”);//var btn=美元(“#盒子”);(“按钮”);//美元btn.on(“点击”,函数(){//如果(text.val美元()==" "){//警报(“请输入内容”);//返回;//}//$ (“ul”) .prepend (“& lt; li>“+ text.val美元()+“& lt; a href=' javascript:,“在删除& lt;/a> & lt;/li>”);//美元text.val (" ");//$ (“a”)。(“点击”,函数(){//美元(这).parent(李).remove ();//})//})//})
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="盒子" id=昂凶印北?
微博发布:& lt;/br> & lt; textarea关口=" 30 "行=" 10 "祝辞& lt;/textarea>
& lt; button>发布& lt;/button>
& lt;/div>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
