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选择器全集详解
Nov 24 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
js实现tab栏切换效果
Aug 02 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
2006/12/13 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python绘制3D图形
2018/05/03 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
团支书竞选演讲稿
2014/04/28 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
五年级数学教学反思
2016/02/16 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android