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 乱码问题
Aug 06 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
JavaScript实现下拉列表
Jan 20 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
PHP 在线翻译函数代码
2009/05/07 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP常用数组函数介绍
2014/07/28 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
js 操作css实现代码
2009/06/11 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript常用的方法整理
2015/08/20 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python模块之StringIO使用示例
2015/04/08 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
带刀到教室的检讨书
2014/10/04 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android