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高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
3种js实现string的substring方法
Nov 09 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
使用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中与数组相关的函数
2007/03/22 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
canvas实现钟表效果
2017/02/13 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
vue实现记事本功能
2019/06/26 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
JS实现密码框效果
2020/09/10 Javascript
python三元运算符实现方法
2013/12/17 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
演讲比赛获奖感言
2014/02/02 职场文书
销售经理竞聘书
2014/03/31 职场文书
感恩节活动策划方案
2014/05/16 职场文书
离职证明标准格式
2014/09/15 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
Python列表的索引与切片
2022/04/07 Python