1.after(content) :在每个匹配的元素之后插入内容
2.before(content):在每个匹配的元素之前插入内容
3.insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
4.insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
练习:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p id="p3">I would like to say: p3</p>
<p id="p2">I would like to say: p2</p>
<p id="p1">I would like to say: p1</p>
</body>
<script language="JavaScript">
//* after(content) :在每个匹配的元素之后插入内容 将指定元素查到某个节点之后 指定节点.after(指定元素)
//* before(content):在每个匹配的元素之前插入内容
//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 在某个节点之后插入指定元素 指定元素.insertAfter(指定节点)
//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前
</script>
</html>
答案:
<script language="JavaScript">
//* after(content) :在每个匹配的元素之后插入内容 将指定元素查到某个节点之后 指定节点.after(指定元素)
$("li").after($("#p3"));
//* before(content):在每个匹配的元素之前插入内容
$("li").before($("#p1"));
//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 在某个节点之后插入指定元素 指定元素.insertAfter(指定节点)
$("#p1").insertAfter($("li"));
//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前
$("#p1").insertBefore($("li"));
</script>