dom操作案例

上一篇博客讲到了dom操作的基本语法。今天将实际案例。

名称：无刷新评论。

如图所示，评论内容，但是页面不刷新。

HTML

 <textarea id="txt"></textarea>   //文本框
  <br />
  <input type="button" id="btn" value="评论" οnclick=""/>   //按钮
  <div id="dv"></div>   //评论区

JavaScript

///通过id获得结点，写成一个方法
var j=function(id){
	return document.getElementById(id);
		};
///页面加载时
 οnlοad=function(){
		var btn=j("btn");      //获得btn
		btn.οnclick=function(){     //单机btn时
			//获得用户输入
			var txt=j("txt").value;
			//创建p标签
			var p=document.createElement("p");
			///把txt内容追加到p结点上
			p.appendChild(document.createTextNode(txt));
			//追加或插入
			//在div里面找到p
			var ps=j("dv").getElementsByTagName("p");
			if(ps.length>0){    //如果有，就是已经有了评论，插入到评论的前面
			j("dv").insertBefore(p,ps[0]);

			}else{             //否则，创建新的评论
			j("dv").appendChild(p);

			}