JavaScript设置div内容;js设置div内容

 时间:2024-10-11 20:13:27

1、打开html开发工具,新建html文件。如图:

JavaScript设置div内容;js设置div内容

2、在html代码页面找到<body>,在 <body>里创建一个按钮标签。如掬研疔缎图:代码:<input type="button" onclick="showBtn()" value="点我" />

JavaScript设置div内容;js设置div内容

3、在按钮标签后创建一个<div>用于设置内容,并给这个<div>设置一个id。如图:代码:<div id="content"></div>

JavaScript设置div内容;js设置div内容

4、创建点击事件。在<title>后面新建一个<script>,然后在这个<script>里创建一个点击的事件,这个事件就是点击按钮后修改div里的内容。如图:

JavaScript设置div内容;js设置div内容

5、保存好html文件后使用浏览器打开,点击按钮即可看到效果。如图:

JavaScript设置div内容;js设置div内容

6、所有代码。可以直接把所有代码复制到新建html文件上,保存后直接使用浏览器打开即可看到效果。所有代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js设置div的内容</title> <script> function showBtn(){ document.getElementById("content").innerHTML= "大家好,我是添加到div的内容"; } </script> </head> <body> <input type="button" onclick="showBtn()" value="点我" /> <div id="content"></div> </body></html>

JavaScript设置div内容;js设置div内容
  • css如何给图片加上两层边框
  • myeclipse版本怎么查看
  • 前端编程-用浏览器自带的取色功能快速拾取颜色
  • 如何用PHP往MySQL中插入数据
  • 热门搜索
    怎么给充电宝充电 怎么卖萌 利润分配怎么算 宝宝荨麻疹怎么办 qq怎么换头像 皮肤干燥怎么办 ip地址怎么看 月经一直不来怎么办 拍一拍怎么改 方兴未艾怎么读