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的划词搜索实现(备忘)
Sep 14 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
js使用心得分享
Jan 13 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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中函数的形参与实参的问题说明
2010/09/01 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
js 单引号 传递方法
2009/06/22 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
javascript cookies操作集合
2010/04/12 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
详解JavaScript函数
2015/12/01 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python读取excel表格生成erlang数据
2017/08/26 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python 检查文件mime类型的方法
2018/12/08 Python
pygame实现弹球游戏
2020/04/14 Python
python 实现图片裁剪小工具
2021/02/02 Python
英语导游词
2015/02/13 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS