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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
Javascript模块化编程详解
Dec 01 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
微信小程序实现拍照和相册选取图片
May 09 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数据库操作面向对象的优点
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
PHP EOT定界符的使用详解
2008/09/30 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery解析Json实例详解
2015/11/24 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
python装饰器使用方法实例
2013/11/21 Python
Python基本数据类型详细介绍
2014/03/11 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
学python安装的软件总结
2019/10/12 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Python爬取梨视频的示例
2021/01/29 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
苹果台湾官网:Apple台湾
2019/01/05 全球购物
幼儿园英语教学反思
2014/01/30 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
公司活动总结范文
2014/07/01 职场文书
民事授权委托书范文
2014/08/02 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2015年教师工作总结范文
2015/03/31 职场文书