SOURCE

$("#show").click(function() {
  $("#p1").show();
});
$("#hide").click(function() {
  $("#p1").hide();
});
$("#插入").click(function() {
  $("#p2").append("<sapn>洛阳师范学院</span>");
});

$("#尾部").click(function() {
  $("#p3").after("<sapn>信息技术学院</span>");
});

$("#高度").click(function() {
  $("#p4").append($("#p4").height());
});

$("#高度1").click(function() {
  $("#div1").height("500");
});

$("#宽度").click(function() {
  $("#div1").after($("#div1").width());
});
$("#克隆").click(function() {
  $("#p4").clone().appendTo("body");
});
$("#at").click(function() {
  $("<span>欢迎你</span>").appendTo("#p1")
});
$("#img").click(function() {
  $("<img src=http://img1.imgtn.bdimg.com/it/u=1160312219,3943029918&fm=23&gp=0.jpg           height=200px width=600px>").appendTo("#div1");
})

<div><div id="div1">
</div>
<h1>
  洛阳师范学院
</h1>
<p id="p1">
  a1
</p>
<p id="p2">
  a2
</p>
<p id="p3">
  b1
</p>
<p id="p4">
  b2
</p>
<button id="hide">
  隐藏
</button>
<button id="show">
  显示
</button>
<button id="插入">
  插入
</button>
<button id="尾部">
  尾部
</button>
<button id="高度">
  高度
</button>
<button id="高度1">
  高度+
</button>
<button id="宽度">
  宽度
</button>
<button id="克隆">
  克隆
</button>
<button id="at">
  尾部插入HTML元素
</button>
<button id="img">
  图片
</button>
</div>

#div1 {
  height: 200px;
  width: 600px;
  background-color: pink;
  margin:0 auto;
    
}
body{text-align:center}