SOURCE

$(document).ready(function(){
	$("button").click(function(){
		$("p:first").addClass("intro");
	});
});
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>Hello world!</p>");
  });
});
	$("#btn1").click(function(){
		$("p").append(" <b>插入文本</b>.");
	});
	$("#btn2").click(function(){
		$("ol").append("<li>插入项</li>");
	});
$(document).ready(function(){
	$("btn3").click(function(){
		$("p").before("<p>Hello world!</p>");
	});
});$(document).ready(function(){
	$("btn4").click(function(){
		$("div").empty();
	});
});

<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>给第一个P元素添加一个类名</button>
<button id="btn1">插入文本</button>
<button id="btn2">插入列表项</button>
<button id="btn3">给第一个P元素添加一个类名</button>
<div style="height:100px;background-color:yellow">
这是一些文本。
<p>这是div块中的一个段落。</p>
</div>
<p>这是div块外部的一个段落。</p>
<button id="btn4">移除div块中的内容</button>

.intro{
	font-size:150%;
	color:red;
}