零基础学做网站培训介绍

当前位置:

JS实现点击按钮清空DIV里内容

JS实现点击按钮清空DIV里内容是做网站时经常用到,可以实现点击某个按钮就清除指定DIV里的内容。就是通过在js中获得div对象,设置对象的innerHTML属性为空,就可实现清空div里面的内容。下面介绍一下JS实现点击按钮清空DIV里内容的方法。
JS实现点击按钮清空DIV里内容

方法/步骤

  1. 新建一个html文件,命名为test.html,用于讲解js怎么清空div里面的内容。
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS实现点击按钮清空DIV里内容</title>
    </head>

    <body>

    </body>
    </html>

    JS实现点击按钮清空DIV里内容

  2. 在test.html文件内,使用div标签创建一个模块,在div标签内,使用p标签创建一行文字。
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS实现点击按钮清空DIV里内容</title>
    </head>

    <body>
    <div>
    <p>这是测试内容!</p>
    </div>
    </body>
    </html>

    JS实现点击按钮清空DIV里内容

  3. 在test.html文件内,设置div标签的id为testid,主要用于下面通过该id获得div对象。
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS实现点击按钮清空DIV里内容</title>
    </head>

    <body>
    <div id="testid">
    <p>这是测试内容!</p>
    </div>
    </body>
    </html>

    JS实现点击按钮清空DIV里内容

  4. 在test.html文件内,使用button标签创建一个按钮,按钮名称为“清空div里面的内容”。
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS实现点击按钮清空DIV里内容</title>
    </head>

    <body>
    <div id="testid">
    <p>这是测试内容!</p>
    </div>
    <p><button>清除DIV内容</button></p>
    </body>
    </html>

    JS实现点击按钮清空DIV里内容

  5. 在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行clearcon()函数。
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS实现点击按钮清空DIV里内容</title>
    </head>

    <body>
    <div id="testid">
    <p>这是测试内容!</p>
    </div>
    <p><button onClick="cleancon">清除DIV内容</button></p>
    </body>
    </html>

    JS实现点击按钮清空DIV里内容

  6. 在js标签中,创建clearcon()函数,在函数内,使用getElementById()方法通过id(testid)获得div对象,将innerHTML属性设置为空,便可实现清空div的内容。
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS实现点击按钮清空DIV里内容</title>
    </head>

    <body>
    <div id="testid">
    这是测试内容!
    </div>
    <button onClick="clearcon()">清空编号</button>
    <script>
    function clearcon(){
    var obj=document.getElementById('testid');
    obj.innerHTML='';
    }

    </script>
    </body>
    </html>

    JS实现点击按钮清空DIV里内容

  7. 在浏览器打开test.html文件,点击按钮,查看实现的效果。JS实现点击按钮清空DIV里内容
    JS实现点击按钮清空DIV里内容

总结:

  1. 创建一个test.html文件。
  2. 在文件内,使用div标签创建一个模块,在div标签内,使用p标签创建一行文字,同时创建一个button按钮,用于触发执行js函数。
  3.  在js标签内,创建函数,在函数内,使用getElementById()方法通过id(testid)获得div对象,将innerHTML属性设置为空,便可实现清空div的内容。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟,它是一秒秒的变化。对于这种效果,我们自己做网站时也可以制作出来,只需要通过JS就
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 在学做网站论坛前面的教程:wordpress制作符合Bootstrap的导航栏菜单(带二级菜单),我们可以制作出带有二级下拉菜单的导航。但是有的建网站学员在制
  • 作者: 小学霰Email: xiaoxueba@sina.com详细内容:张老师,您好,看了您的学做网站教程视频,我在论坛上下载了一个DW软件,但是我看到视频课
  • 很多人在使用DZ程序做论坛网站后,会发现在论坛发贴时,上传附件在IE浏览器下不显示任意图标,呈现空白状态。如下图:究其原因是由于DISCUZ程序
  • 使用DZ程序做论坛网站建设时,它的贴子编辑器是不带发布视频按钮的,需要我们通过论坛网站后台去开启这个功能。DZ论坛编辑器开启视频按钮功能的
  • 很多同学在使用网站空间去练习时,可以用一个空间去制作不同类型的网站,例如已经用空间制作好了博客网站,现在想使用这个空间再去做企业网站,这时就
  • 网站改版时,已做好的网站需要删除,用网站空间和数据库去安装一个新的网站,这时需要删除原来网站的程序和数据。删除程序的方法很简单,通过FTP工
  • 问:老师,你好,我买了一个空间,然后跟着论坛的VIP课程进行练习操作,我已经做好了一个博客网站,我想用同一个空间继续学习下面的企业网站课程
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 不是作业 但是找了下版块 不知道发那里 貌似只有这里特别合适。之所以决定自己写CSS 是由于看了建站课程里的DIV+CSS课程,为记忆CSS而作出的决定;另外
  • CSS如何调整DIV顶部边距 图文教程 (116025 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • 各类微博的流量很大,如果自己网站内容能够同步更新到自己的微博上,可以让更多的人看到自己网站上的内容了。如何将自己网站内容同步更新到微
  • 提高网站的“回头客”,我们需要给注册会员提供一些特权,而对游客隐藏部分wordpress文章,因为有很多自己做网站论坛vip学员问到,所以这里就提供一段代
  • 在自己做网站论 坛的公司模板制作的课程中,跟大家讲了一个分页插件,那就是wordpress分页插件wp-page-numbers,这个插件特别的棒,如果我们网站的内容很