如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）
Posted 狱典司
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）相关的知识，希望对你有一定的参考价值。
关键：
- 使用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>
以上是关于如何用js实现简单的页面html动态加载（“看更多“/页面折叠功能）的主要内容，如果未能解决你的问题，请参考以下文章