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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
Vue底层实现原理总结
Feb 17 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php图片上传类 附调用方法
2016/05/15 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
javascript实现下雨效果
2017/03/27 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python中的lambda表达式用法详解
2016/06/22 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Django框架模板用法入门教程
2019/11/04 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python openpyxl模块的使用详解
2021/02/25 Python
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
竞争上岗演讲稿范文
2014/05/12 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
庐山导游词
2015/02/03 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
汉语拼音教学反思
2016/02/22 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
MySQL GTID复制的具体使用
2022/05/20 MySQL