简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > appendTo(),prependTo(),insertAfter(),insertBefore()
Blogger Information
Blog 36
fans 0
comment 1
visits 28089
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
appendTo(),prependTo(),insertAfter(),insertBefore()
其琛的博客
Original
740 people have browsed it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>appendTo(),prependTo(),insertAfter(),insertBefore()使用方法</title>
<style type="text/css">
ul{
background-color: #363636;
width: 300px;
height: auto;
text-align: center;
margin: auto;
padding: 0px;
list-style: none;
color: white;
}
</style>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
         $('p:first').append("<h2>我是第一</h2>")
         //append实在元素结尾仍在内部插入指定内容
         $('<h2>我是第二</h2>').appendTo('p:eq(1)')
         //appendTO也是在元素结尾插入内容，只是内容和选择器位置与append不同
         $('p:eq(2)').prepend('<h2>我是第三</h2>')
         // prepend是在元素头部插入指定内容
         $('<h2>我是第四</h2>').prependTo('p:eq(3)')
         // 内容与选择器位置与prepen不同
         $('<span>我是之后被插入的内容</span><br>').insertAfter('li')
//          insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
// 注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后
         $('<span>我是之前被插入的内容</span><br>').insertBefore('li')
})
</script>
</head>
<body>
<div>
<ul>
<li>
<p>第01</p>
</li>
<li>
<p>第02</p>
</li>
<li>
<p>第03</p>
</li>
<li>
<p>第04</p>
</li>
<li>
<p>第05</p>
</li>
</ul>
</div>
</body>
</html>

样式如下]F%`ICFNAV)S4Z0H5{BTMTB.png

总结：了解了appendTo(),prependTo(),insertAfter(),insertBefore()的用法和不同点。

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！