前几天学到了用JavaScript实现无刷新评论,晒出来记录一下自己的成果
<!DOCPYPE html>
<html>
<head>
<title>评论</title>
<style type="text/css">
#dv{
border:1px solid pink;
}
#txt {
width:400px;
height:100px;
}
</style>
<script type="text/javascript" src="J.js"></script>
<script type="text/javascript">
onload=function(){
var btn=J("btn");
btn.onclick=function(){
//获得用户输入
var txt=J("txt").value;
//创建P标签
var p=document.createElement("p");
p.innerHTML=txt;
//追加或插入
var ps=J("dv").getElementsByTagName("p");
if(ps.length>0){
//插入
J("dv").insertBefore(p,ps[0])
}else{
//追加
J("dv").appendChild(p);
}
};
};
</script>
</head>
<body>
<textarea id="txt"></textarea>
<br/>
<input type="button" value="评论" id="btn" />
<br/>
<div id="dv">
</div>
</body>
</html>
J.js文件内容
var J = function(id) {
return document.getElementById(id);
};
成果:
只是简单实现,并没有进行美化