【汇智学堂】-div+css布局十九(汇智学堂导师列表页-jQuery添加元素）
作者：互联网
效果图：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery控制div</title>
</head>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function a(){
$("body").append("<div style='padding-left: 880px;padding-top:50px;'><h1>导师简介</h1></div>");
$("body").append("<div><hr style='width:300px;text-align: center;height: 5px;background-color: black;'></div>")
$("body").append("<div id='div01' style='margin-left: 320px;margin-top: 50px;height: 500px;width: 1500px;background-image: url(imgs/teacher.png);background-repeat:no-repeat'></div>")
$("#div01").append("<div style='padding-left: 70px;padding-top: 150px;float: left;width: 200px;'><p>XiangRong.Guo</p><p>人民大学硕士</p><p>从业22年，有着广泛的企业合作基础</p></div>");
$("#div01").append("<div style='padding-left: 90px;padding-top: 150px;float: left;width: 200px;'><p>Hao.Chen</p><p>工信部项目管理专家组成员</p><p>从业23年，有着深厚的项目技术管理背景</p></div>");
$("#div01").append("<div style='padding-left: 110px;padding-top: 150px;float: left;width: 200px;''><p>HuiHui.Wei</p><p>十三五规划教材特约作者</p><p>从业20年，有着15年测试工作经验</p></div>");
$("#div01").append("<div style='padding-left: 110px;padding-top: 150px;float: left;width: 200px;''><p>YuGuang.Lei</p><p>工信部人才中心特聘讲师</p><p>从业23年，有着15年架构师工作经验</p></div>");
}
</script>
<body onl oad="a()">
</body>
</html>
标签：jQuery,body,div01,从业,汇智,学堂,有着,append 来源： https://blog.csdn.net/weixin_39593940/article/details/94759808