SOURCE

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append("<b>追加文本</b>");
  });
  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});
//第一部分
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
//第二部分
$("#Btn4").click(function(){
$("p:first").addClass("intro");
$("p").after("<p>后插入内容</p>");
  $("p").append("<b>结尾内容</b>");
});
//第三部分

<p>这是一个段落</p>
<p>这是另一个段落</p>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
<hr>
<div id="div1">
  JSRUN项目信息
  <p>资源引用</p>
  <p>切换到极客黑模式</p>
 
  </div>
<br>
<button>移除div元素</button>
<hr>
<h1>heading</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button id="Btn4">show</button>
<hr>

#div1{height:100px;
width:300px;
  border:1px solid black;
  background-color:green;
}
.important
{
  font-weight:bold;
  font-size:xx-large;
  
}
.blue
{
  color:blue;
}