<div class="content">

<div id="box">

<div class="one" id="one">one</div> <div class="two" id="two">two</div>

<div class="three" id="three">three</div><div class="four" id="four">four</div>

<div class="five" id="five">five</div><div class="six" id="six">six</div>

<div class="seven" id="seven"> seven

<ul><li>001</li> <li>002</li><li class="li003">003</li></ul>

</div>

</div>

<div class="btnbtn">

<button id="addone">元素的开头插入内容</button>

<button id="addtwo">元素的结尾插入内容</button>

<button id="addfive">元素的开头插入元素</button>

<button id="addfive2">元素的结尾插入元素</button>

<button id="addsix">元素之后插入内容</button>

<button id="addsix2">元素之前插入内容</button>

<button id="addseven">删除元素</button>

<button id="addseven2">选择删除元素</button>

</div>

</div>

<style>.content{width:100%; height:100%; }

#box{ float:left; width:300px; height:300px;}

div {text-align: center; width: 200px; height: 20px; margin-top: 10px;}

.one {background: #ffd800;}

.two { background: #b6ff00;}

.three { background: #808080;}

.four{ background: #ff6a00;}

.five {

width:200px; height:150px; background:#0094ff; border:1px solid #000;

}

.six{ background:#30ebc4; }

.seven{width:200px;height:100px;background:#ffd800;border: 1px solid #000;}

button {

width:150px;height:30px;border-radius:20px;outline: none;

border: none; background: #00ffff;  margin-top:5px;

}

.btnbtn{float:left;}

ul{ margin:0px;padding:0px;}

ul li{ background:#fff;list-style:none;margin-top:5px;}

</style>

<script>

获取按钮的id并且给一个点击事件的方法

$(document).ready(function () {

//在元素内文本开头添加内容

$("#addone").click(function () {

$("#two").prepend("开头内容");

});

//在元素内文本结尾添加内容

$("#addtwo").click(function () {

$("#two").append("结尾内容");

});

//在元素前添加元素

$("#addfive").click(function () {

$("#five").prepend("<p>开头添加元素-p标签</p>");

});

//在元素后添加元素

$("#addfive2").click(function () {

$("#five").append("<p>结尾添加元素-p标签</p>");

});

//在元素前添加内容

$("#addsix").click(function () {

$("#six").before("<b>six之前</b>");

});

//在元素后添加内容

$("#addsix2").click(function () {

$("#six").after("<b>six之后</b>");

});

//移除元素

$("#addseven").click(function () {

$("ul").remove();

});

//移除子元素

$("#addseven2").click(function () {

$("li").remove(".li003");

});

});

</script>