零基础学做网站培训介绍

当前位置:

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、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 作者: 小学霰Email: xiaoxueba@sina.com详细内容:张老师,您好,看了您的学做网站教程视频,我在论坛上下载了一个DW软件,但是我看到视频课
  • 很多人在使用DZ程序做论坛网站后,会发现在论坛发贴时,上传附件在IE浏览器下不显示任意图标,呈现空白状态。如下图:究其原因是由于DISCUZ程序
  • 很多同学在使用网站空间去练习时,可以用一个空间去制作不同类型的网站,例如已经用空间制作好了博客网站,现在想使用这个空间再去做企业网站,这时就
  • 网站改版时,已做好的网站需要删除,用网站空间和数据库去安装一个新的网站,这时需要删除原来网站的程序和数据。删除程序的方法很简单,通过FTP工
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 不是作业 但是找了下版块 不知道发那里 貌似只有这里特别合适。之所以决定自己写CSS 是由于看了建站课程里的DIV+CSS课程,为记忆CSS而作出的决定;另外
  • 各类微博的流量很大,如果自己网站内容能够同步更新到自己的微博上,可以让更多的人看到自己网站上的内容了。如何将自己网站内容同步更新到微
  • 提高网站的“回头客”,我们需要给注册会员提供一些特权,而对游客隐藏部分wordpress文章,因为有很多自己做网站论坛vip学员问到,所以这里就提供一段代