jQueryDom操作之外部插入节点

来源：互联网发布：7k7k皮卡堂盗号软件编辑：程序博客网时间：2024/04/29 09:44

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>