js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】


Posted in Javascript onNovember 07, 2019

本文实例讲述了js使用文档就绪函数动态改变页面内容。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    /*文档就绪函数*/
    /*动态修改网页的内容*/
    window.onload = function () {
      var d = document.getElementById('d');
      //添加文本信息
      d.innerHTML="hhhh";//添加文本信息或者标签
     // d.innerText="kkkk";//添加文本信息
      var abc = document.getElementsByName("abc");
      //通过数组下标得到对应元素
      abc[0].innerText='sssss'
      //通过标签名字得到
      var span = document.getElementsByTagName('span');
      span[0].innerText='fffff'
      //通过classname找对应元素
      var c=document.getElementsByClassName('c');
      for (var i = 0;i<c.length;i++ ){
        c[i].innerText='买买买'
      }
    }
  </script>
</head>
<body>
<div id="d"></div>
<a href="js1.html" rel="external nofollow" name="abc">啦啦啦啦</a>
<span>
</span>
<p class="c">坎坎坷坷</p>
<p class="c">坎坎坷坷</p>
</body>
</html>

运行效果:

js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
javascript模块化简单解析
Apr 07 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
vue获取data数据改变前后的值方法
Nov 07 #Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 #Javascript
vue.js循环radio的实例
Nov 07 #Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 #Javascript
vue遍历对象中的数组取值示例
Nov 07 #Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 #Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
Express.JS使用详解
2014/07/17 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
PyCharm代码格式调整方法
2018/05/23 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
纽约海:Sea New York
2018/11/04 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
天网面试题
2013/04/07 面试题
自主实习接收函
2014/01/13 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
股东协议书范本
2014/04/14 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
Python软件包安装的三种常见方法
2022/07/07 Python