js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
更新时间：2019年11月07日 11:08:46 作者：xuehyunyu
这篇文章主要介绍了js使用文档就绪函数动态改变页面内容,结合实例形式分析了JavaScript使用innerHTML、innerText函数动态操作页面元素相关使用技巧,需要的朋友可以参考下
本文实例讲述了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>
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
在互联网高速发展的今天，文件上传已经成为网页应用中的一个基本功能，随着用户上传文件尺寸的不断增大、对质量清晰度的要求也越来越高，所以本文给大家介绍了如何使用JavaScript实现文件秒传功能,需要的朋友可以参考下2024-01-01
这篇文章主要给大家介绍了关于JavaScript实现页面中录音功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了Object.keys方法实例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
JavaScript中字符串GBK与GB2312的编解码示例讲解
在浏览器JavaScript环境中,可以使用TextEncoder和TextDecoder API 来进行 GBK 编码和解码,也可以使用 encodeURIComponent 函数对字符串进行编码,最好使用第三方库,比如iconv-lite来实现2023-12-12
这篇文章主要介绍了JavaScript封装Vue-Router实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
这篇文章主要为大家详细介绍了js实现车辆管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了移动前端开发之viewport的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了前端JS经典问题之跨域的解决方案,文中主要讲了浏览器的同源策略、跨域限制以及解决跨域的几种方法,包括CORS、JSONP和配置代理等,需要的朋友可以参考下2024-11-11
LRU全称为Least Recently Used，即最近使用的。针对的是在有限的内存空间内，只缓存最近使用的数据（即get和set的数据）。本文介绍了JavaScript实现LRU缓存的三种方式，需要的可以参考一下2022-06-06
这篇文章主要介绍了js实现3D照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最新评论