SOURCE

$("#class").click(function(){
 $("#mo").after("<p>Hello world!</p>");
});
$("#re").click(function(){
$("#han").before("<p>Hello world!</p>");
});

$("#shu").click(function(){
  $("img").attr("width","250");
});

$("#append").click(function(){
$("#ko").append("<b>Hello World!</b>");
});//在<b>元素结尾插入内容//

$("#gu").click(function(){
$("<span>Hello World!</span>").appendTo("#lp");
});//在#lp结尾插入span元素//

$("#xue").click(function(){
$("#ji").clone().appendTo("h1");
});//克隆#ji的元素到h1后面//
$("#guang").click(function(){
    alert($("#div1").innerHeight());
});
$("#inter").click(function(){
$("<span>山不在高</span>").insertAfter("h3");
});

$("#xingqiu").click(function(){
    $("<span>水不在深</span>").insertBefore("h4");
});
$("#out").click(function(){
alert($("#div2").outerHeight());
});
$("#YU").click(function(){
$("h2").prepend("<b>硕果累累</b>");
});//在被选元素前头加入//
$("#luo").click(function(){
$("p").remove();
});//移除所有p元素

$("#revive").click(function(){
$("#hi").removeAttr("style");
});

<p id="mo">美好</p>
<button id="class">after</button><br>
<p id="han">寒心</p>
<button id="re">before</button><br>
<img src="http://d.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=393f2c7ecb95d143da76e3254bcbe53f/d1a20cf431adcbef0d91be7bafaf2edda3cc9f22.jpg"><br>
<button id="shu">attr</button>

<p id="ko">一切</p>
<button id="append">append</button>

<p id="lp">你好</p>
<button id="gu">appendTo</button>
<h1>湖面</h1>
<p id="ji">暮年</p>
<button id="xue">clone</button>
<div id="div1">光明与黑暗</div>
<button id="guang">height</button>
<h3>bei</h3>
<h3>jing</h3>
<h3>huan</h3>

<button id="inter">internet</button><br>
<h4>ying</h4>
<h4>ni</h4>
<button id="xingqiu">星球</button>

<div id="div2">华山</div>
<button id="out">GOOUT</button>
<h2>冬天冷夏天雨</h2>
<button id="YU">夏雨</button><br><br>
<p>今夕是何夕</p>
<p>晚风过花庭</p>
<p>予人乐后飘零</p>
<button id="luo">飘零</button>

<div id="hi"style="color:blue;font-size:30px;">星云</div>
<button id="revive">苏醒</button>

#div1{
  height:100px;
  padding:10px;
}
#div2{
  border:3px;
  margin:20px;
  height:50px;
}