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判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
vue-router 学习快速入门
Mar 01 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 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
jQuery TextBox自动完成条
2009/07/22 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
Javascript实现字数统计
2015/07/03 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue中使用GraphQL的实例代码
2019/11/04 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
python 实现红包随机生成算法的简单实例
2017/01/04 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
python speech模块的使用方法
2020/09/09 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
水利学院求职自荐书
2014/02/01 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL