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 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
bootstrap table小案例
Oct 21 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Node.js API详解之 net模块实例分析
May 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
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
Vue异步加载about组件
2017/10/31 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
softmax及python实现过程解析
2019/09/30 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
违反课堂纪律检讨书
2014/01/19 职场文书
葬礼司仪主持词
2014/03/31 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
自我推荐信范文
2014/05/09 职场文书
《西门豹》教学反思
2016/02/23 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android