主页 / 网络编程 /

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

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了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代码运行工具测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题《》、《》、《》、《》、《》、《》及《》

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

上一篇：vue 实现单选框设置默认选中值 下一篇：vue获取data数据改变前后的值方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by