收藏
批改状态：合格
老师批语：
一、每个函数的语法，参数及功能如下：
appendTo()
* 语法:content.appendTo(target)
* 参数: 要添加或移动的节点
* 功能: 把内容(内容可以自己创建，也可以选择页面上已有的内容)插入到目标元素内容的后面
prependTo()
* 语法:content.prependTo(target)
* 参数: 要添加或移动的节点
* 功能: 把内容(内容可以自己创建，也可以选择页面上已有的内容)插入到目标元素内容的前面
insertAfter()
* 语法:content.insertAfter(target)
* 参数: 要添加或移动的节点
* 功能: 把内容(内容可以自己创建，也可以选择页面上已有的内容)插入到目标元素的后面
insertBefore()
* 语法:content.insertBefore(target)
* 参数: 要添加或移动的节点
* 功能: 把内容(内容可以自己创建，也可以选择页面上已有的内容)插入到目标元素的前面
二、实战案例演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数appendTo(),prependTo(),insertAfter(),insertBefore()的用法</title>
<style type="text/css">
li{
width: 300px;
background-color: lightgray;
margin-bottom: 20px;
}
</style>
</head>
<body>
<ul>
<li>早餐</li>
<li>午餐</li>
<li>晚餐</li>
<li>夜宵</li>
</ul>
<button style="background-color: lightblue;">appendTo()按钮</button>
<button style="background-color: lightblue;">prependTo()按钮</button>
<button style="background-color: lightblue;">insertAfter()按钮</button>
<button style="background-color: lightblue;">insertBefore()按钮</button>
<p style="background-color: orange;width: 300px;font-size: 1.3em;font-weight: bolder;">西红柿炒蛋</p>
<p style="background-color: orange;width: 300px;font-size: 1.3em;font-weight: bolder;">青椒炒肉</p>
<p style="background-color: orange;width: 300px;font-size: 1.3em;font-weight: bolder;">麻辣香锅</p>
<p style="background-color: orange;width: 300px;font-size: 1.3em;font-weight: bolder;">桂林米粉</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()方法演示：
//给appendTo()按钮添加点击事件
$('button').eq(0).on('click',function(){
// 1.添加新节点
// 首先创建一个新节点
var li=$('<li>').text('每天必须吃一个苹果').css('background-color','yellow')
// 其次将新节点添加到目标元素的内容后面
li.appendTo($('ul'))
// 2.移动节点(请将添加操作的代码注释掉)
$('p:eq(0)').appendTo('ul')
})
// 二、prependTo()方法演示：
//给prependTo()按钮添加点击事件
$('button').eq(1).on('click',function(){
// 1.添加新节点
// 首先创建一个新节点
var li=$('<li>').text('每天必须吃一个苹果').css('background-color','yellow')
// 其次将新节点添加到目标元素的内容前面
li.prependTo($('ul'))
// 2.移动节点(请将添加操作的代码注释掉)
$('p:eq(1)').prependTo('ul')
})
// 三、insertAfter()方法演示：
//给insertAfter()按钮添加点击事件
$('button').eq(2).on('click',function(){
// 1.添加新节点
// 首先创建一个新节点
var p=$('<p>').text('每天必须吃一个苹果').css('background-color','yellow')
// 其次将新节点添加到目标元素后面
p.insertAfter($('ul'))
// 2.移动节点(请将添加操作的代码注释掉)
$('p:eq(2)').insertAfter('ul')
$('p:eq(2)').insertAfter('li:eq(1)')
})
// 四、insertBefore()方法演示：
//给insertBefore()按钮添加点击事件
$('button').eq(3).on('click',function(){
// 1.添加新节点
// 首先创建一个新节点
var p=$('<p>').text('每天必须吃一个苹果').css('background-color','yellow')
// 其次将新节点添加到目标元素前面
p.insertBefore($('ul'))
// 2.移动节点(请将添加操作的代码注释掉)
$('p:eq(3)').insertBefore('ul')
$('p:eq(3)').insertBefore('li:eq(2)')
})
</script>点击 "运行实例" 按钮查看在线实例
三、效果图如下：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
