收藏
批改状态：合格
老师批语：
appendTo(),prependTo(),insertAfter(),insertBefore()
appendTo()插入到目标元素内容的后面
prependTo()插入到目标元素内容的前面
insertAfter()插入到目标节点的后面
insertBefore()插入到目标元素的前面
用法：插入用法和移动用法
语法：content.insertBefore(target)
参数: 要插入或移动的节点
步骤：
一、添加操作
创建节点
var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新节点2')
var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新节点3')
插入操作，将节点随便你插入到目标节点
li.prependTo($('目标节点'))
p.insertAfter($('目标节点'))
二、移动操作
$('自身节点').prependTo($('目标节点'))
下面看实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
background-color: skyblue;
width:300px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button>append()</button>
<button>prepend()</button>
<button>after()</button>
<button>befor()</button>
<p style="background-color: red;width: 300px">移动append()</p>
<p style="background-color: red;width: 300px">移动prepend()</p>
<p style="background-color: red;width: 300px">移动after()</p>
<p style="background-color: red;width: 300px">移动befor()</p>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// appendTo(),prependTo(),insertAfter(),insertBefore(){
// content.appendTo(target)
// 1.添加操作
// 创建新元素
//var li = $('<li>').text('我是新appendTo()').css('background-color','lightgreen')
var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
// 插入位置
// $('ul').appendTo(li)
li.appendTo($('ul'))
// 2.移动操作:针对页面中已经存在的节点
// $('ul').append($('p:first'))
$('p:first').appendTo($('ul'))
})
$('button').eq(1).on('click',function(){
// content.prependTo(target)
// 1.添加操作
// 创建新元素
//var li = $('<li>').text('我是新appendTo()').css('background-color','lightgreen')
// var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新生成的节点2')
// 插入位置
// $('ul').prependTo(li)
// li.prependTo($('ul'))
// 2.移动操作:针对页面中已经存在的节点
// $('ul').prepend($('p:first'))
$('p:eq(1)').prependTo($('ul'))
})
$('button').eq(2).on('click',function(){
// content.insertAfter(target)
// 1.添加操作
// 创建新元素
//var li = $('<li>').text('我是新appendTo()').css('background-color','lightgreen')
var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新生成的节点3')
// 插入位置
// $('ul').after(li)
p.prependTo($('ul'))
// 2.移动操作:针对页面中已经存在的节点
// $('ul').after($('p:first'))
//移动到第2个<li>之后
// $('p:eq(2)').insertAfter($('li:eq(1)'))
$('p:eq(2)').insertAfter($('ul'))
})
$('button').eq(3).on('click',function(){
// content.insertBefore(target)
// 1.添加操作
// 创建新元素
//var li = $('<li>').text('我是新appendTo()').css('background-color','lightgreen')
var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
// 插入位置
// $('ul').before(li)
// p.insertBefore($('ul'))
p.prependTo($('li:eq(2)'))
// 2.移动操作:针对页面中已经存在的节点
//移动到<ul>之前
// $('p:eq(3)').insertBefore($('ul'))
//移动到第3个<li>之前
$('p:eq(3)').insertBefore($('li:eq(2)'))
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
