JavaScript简单实现动态改变HTML内容的方法示例


Posted in Javascript onDecember 25, 2018

本文实例讲述了JavaScript简单实现动态改变HTML内容的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript:改变 HTML 内容</title>
  <script>
    function myFunction() {
      x = document.getElementById("demo");
      console.dir(x);
      x.innerHTML = "欢迎访问三水点靠木 3water.com";//改变内容
      x.style.color="#ff0000"; //改变样式
    }
  </script>
</head>
<body>
<p id="demo">js能够改变html元素的内容。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行上述代码,可得到如下运行结果:

JavaScript简单实现动态改变HTML内容的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 #Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 #Javascript
详解vuex commit保存数据技巧
Dec 25 #Javascript
bootstrap table实现合并单元格效果
Dec 24 #Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 #Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 #Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
食品安全责任书
2014/04/15 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
留学推荐信怎么写
2015/03/26 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL