如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）

最新推荐文章于 2024-05-09 21:12:04 发布

狱典司

最新推荐文章于 2024-05-09 21:12:04 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： javascript 前端 html bootstrap

本文链接：https://blog.csdn.net/weixin_47826078/article/details/120781435

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关键：

使用document.createElement函数创建html元素
滤清各元素父子关系并使用appendChild（）函数将其联系

下面给出两个示例代码：

示例代码一
注意：该代码使用了BootStrap5

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
  <title>动态生成控件 CSDN@狱典司</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>


  <script>
    var i2 = 3;
    function flash2() {
      if (i2 <= 6) {
        var times;
        times = i2;
        var nums = times + 3;
        while (times < nums) {
          var up = document.getElementById("up");

          var div0 = document.createElement("div");
          div0.className = "container p-4 my-5 border"

          var div1 = document.createElement("div");
          div1.className = "row ";

          var div2 = document.createElement("div");
          div2.className = "col-sm-3 p-3 bg-white ";

          var img = document.createElement("img");
          img.src = "p1.png";
          img.alt = "Big Boat";
          img.class = "d-block";
          img.style = "width:100%";

          div1.appendChild(div2);
          div2.appendChild(img);

          var div3 = document.createElement("div");
          div3.className = "col-sm-9 p-3 bg-white ";

          var h = document.createElement("h5");
          h.innerHTML = "文章标题";

          var p = document.createElement("p");
          p.innerHTML = "文章描述";

          div3.appendChild(h);
          div3.appendChild(p);

          div1.appendChild(div3);
          div0.appendChild(div1);
          up.appendChild(div0);

          times++;
        }
        i2 = times;
      } else {
        alert("人家也是有底线的啦!");
      }
    }
  </script>
  </script>
</head>

<body>
<div id = "up">
  <div class="container p-4 my-5 border">
    <div class="row">
      <div class="col-sm-3 p-3 bg-white ">
        <img img src="p1.png" alt="Big Boat" class="d-block" style="width:100%">
      </div>
      <div class="col-sm-9 p-3 bg-white ">
        <h5>文章标题</h5>
        <p>内容描述</p>
      </div>
    </div>
  </div>
</div>

<div align="center">
  <button type="button"  class="btn btn-primary my-2"  onclick="flash2()">看更多</button>
</div>
</body>
</html>

示例代码二
该代码使用html和js即可实现

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
 <title>动态生成控件 CSDN@狱典司</title>
  <script>
    var info = new Array();
    info[0] = "";
    info[1] = "01. 《计算机网络·自顶向下方法》学习笔记1";
    info[2] = "02. 用图片带你串起进程和文件的知识";
    info[3] = "03. 详解Linux下静态库/动态库的生成和使用";
    info[4] = "04. Linux下详解gcc编译过程（含代码示例）&& gcc使用教程";
    info[5] = "05. 如何用C/C++写一个Linux文件系统模拟器";
    info[6] = "06. 保姆级swap分区详解！手把手带你创建swap分区";
    info[7] = "07. 如何用C/C++写一个自己的语言";
    info[8] = "08. 一文带你捋清 Linux根目录下常见文件目录";
    info[9] = "09. C++如何递归地算出一个文件夹的大小";
    info[10] = "10. 利用PDO.so连接并读取Mysql数据库 ";
    info[11] = "11. 超全！Mysql数据库 常用基本操作总结 ";
    info[12] = "12. 利用PDO.so连接并读取Mysql数据库 ";
    info[13] = "13. 操作系统实验 分区管理 ";
    info[14] = "14. 抓包分析Telnet远程登陆协议信令交互过程 ";
    info[15] = "15. 操作系统实验 生产者/消费者模型 ";
    var i=1;

    function flash() {
      if (i <= 15) {
        var times;
        times = i;
        var nums = times + 5;
        while (times < nums) {
          var top = document.getElementById("top");
          var div = document.createElement("div");
          var a = document.createElement("a");
          div.innerHTML="推荐(" + times + ") ";
          div.id = times;
          a.className="nav-link";
          a.href="#";
          a.id = "link"+times;
          a.innerHTML = info[times];
          div.appendChild(a);
          top.appendChild(div);
          times++;
        }
        i = times;
        document.getElementById("now").innerHTML = i;
      } else {
        alert("人家也是有底线的啦!");
      }
    }
  </script>
</head>

<body>
<div id="top"></div>
<div><input type="button" onclick="flash()" value="添加" /></div>
</body>
</html>

狱典司

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）

关键：使用document.createElement函数创建html元素滤清各元素父子关系并使用appendChild（）函数将其联系下面给出两个示例代码：示例代码一注意：该代码使用了BootStrap5<html><head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>动态生成控件 CSDN@狱典司</ti
复制链接

扫一扫