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的公告无限循环滚动实现代码
May 11 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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实现从身份证中提取生日
2016/05/09 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
使用Python写个小监控
2016/01/27 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python 自动识别并连接串口的实现
2021/01/19 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
AJax面试题
2014/11/25 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
总裁办公室主任职责
2014/01/02 职场文书
高一历史教学反思
2014/01/13 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
酒店厨房管理制度
2015/08/06 职场文书
关于车尾的标语大全
2015/08/11 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers