dom操作案例

最新推荐文章于 2023-04-27 19:13:37 发布

曹学成

最新推荐文章于 2023-04-27 19:13:37 发布

阅读量647

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript JavaScript

本文链接：https://blog.csdn.net/caoxuecheng001/article/details/81052364

JavaScript 同时被 2 个专栏收录

10 篇文章

订阅专栏

JavaScript

10 篇文章

订阅专栏

本文介绍了一个简单的无刷新评论系统的实现方法。通过JavaScript监听按钮点击事件，在不刷新页面的情况下，获取用户输入的内容并动态地将其添加到指定区域，实现评论功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

名称：无刷新评论。

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

HTML

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

JavaScript

///通过id获得结点，写成一个方法
var j=function(id){
	return document.getElementById(id);
		};
///页面加载时
 onload=function(){
		var btn=j("btn");      //获得btn
		btn.onclick=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);

			}