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比较文档位置
Apr 08 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
详解webpack-dev-server的简单使用
Apr 02 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
使用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
提问的智慧
2006/10/09 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
Python生成不重复随机值的方法
2015/05/11 Python
Python中super的用法实例
2015/05/28 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python集合常见运算案例解析
2019/10/17 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python中四舍五入的正确打开方式
2021/01/18 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
社区健康教育实施方案
2014/03/18 职场文书
活动总结报告范文
2014/05/04 职场文书
优秀教师推荐材料
2014/12/16 职场文书
工作推荐信模板
2015/03/25 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python