南宁软件开发，南宁OA开发：www.zkelm.com
拥有一个好的习惯就是成功了一半，当习惯养成了之后， 就会自动的去做这个事情。所以自然而言的。就事半功倍，
javascript操作留言板实例一（内容追加）
用到的语法主要是：Element.Node Element.parent Element.children 元素节点操作
先构建一个input 和一个 send 按钮
<div class="box">
<input id="msg" type="text"/ value="南宁小程序开发公司:" id="msg"><a id="lv" >留言</a>
</div>
<div class="content">
<ul></ul>
</div>
我们来美化一下：
<style type="text/css">
.box{
margin: 10px;
border: 1px solid #00FFFF;
display: flex;
width: 380px;
}
input{
height: 30px;
border: none;
outline: none;
width:300px;
padding-left:20px;
}
.box>a{
color:#f55;
display: inline-block;
width:80px;
height: 32px;
background-color: aqua;
line-height: 32px;
text-align: center;
color:#666;
}
.content ul li{
height: 24px;
width: 350px;
background-color: #00FFFF;
margin-top:5px;
}
.content ul li a{
float: right;
margin-right: 5px;
font-size: 14px;
color: #FF5555;
line-height: 24px;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<input id="msg" type="text"/ value="南宁小程序开发公司:zkelm.com" id="msg"><a id="lv" >留言</a>
</div>
<div class="content">
<ul></ul>
</div>
<body>
效果显示如下：
主角登场，写javascript 写Dom操作， 点击留言的时候， 底下的li 自动追加，并添加内容进去
//给留言按钮 添加事件
document.getElementById("lv").onclick=function(){
//创造元素
var createli=document.createElement("li");
//加入内容
createli.innerHTML=document.getElementById("msg").value;
//获取父元素ul
var ul=document.querySelector(".content ul");
//添加元素到Ul中 node.Element.appendChlid(children)
ul.appendChild(createli);
}
运行结果
倒序插入，parent.insertBefore(Newelement,parent.children[0]) 最后一个参数比较重要！ children[0] 父元素内的首个子元素
这个是指定的位置，没有这个位置就没办法正确插入
javascript代码改成
document.getElementById("lv").onclick=function(){
//创造元素
var createli=document.createElement("li");
//加入内容
createli.innerHTML=document.getElementById("msg").value;
//获取父元素ul
var ul=document.querySelector(".content ul");
//添加元素到Ul中 node.Element.appendChlid(children)
//ul.children[0] =Ul的第一个li位置。before 在~~之前
ul.insertBefore(createli,ul.children[0]);
}
运行结果：
好了 因为时间关系， 留言板得删除 按钮 过一阵子在更新！
如果有朋友需要小程序或者网站开发什么的可以联系我， 本人有一个小团队，支持软件定制 企业oa 自动化脚本 公众号开发 等等
南宁软件开发：www.zkelm.com
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
