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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Vue自定义指令使用方法详解
Aug 21 Javascript
Vue异步加载about组件
Oct 31 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
如何基于js判断浏览器版本
Feb 20 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教程 预定义变量
2009/10/23 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
Yii2单元测试用法示例
2016/11/12 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Angular排序实例详解
2017/06/28 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
wxPython之解决闪烁的问题
2018/01/15 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
"引用"与指针的区别是什么
2016/09/07 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
安全标语大全
2014/06/10 职场文书
园林系毕业生求职信
2014/06/23 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
食品安全责任书范本
2015/05/09 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技