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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
javascript编程起步(第四课)
Feb 27 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
Angularjs单选框相关的示例代码
Aug 17 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
简单使用webpack打包文件的实现
Oct 29 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处理restful请求的路由类分享
2014/02/27 PHP
php学习笔记之基础知识
2014/11/08 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
js实现小时钟效果
2020/03/25 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
python 远程统计文件代码分享
2015/05/14 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python谱减法语音降噪实例
2019/12/18 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
异步传递消息系统的作用
2016/05/01 面试题
七年级生物教学反思
2014/01/30 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript