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中实现私有属性的写类方式(二)
Dec 04 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JavaScript 事件系统
2010/07/22 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python dict remove数组删除(del,pop)
2013/03/24 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python时间日期操作方法实例小结
2020/02/06 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
运动会入场词60字
2014/02/15 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
项目建议书模板
2014/05/12 职场文书
个人安全承诺书
2014/05/22 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
Go语言空白表示符_的实例用法
2021/07/04 Golang
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs