关键：
使用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="/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="/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>
