收藏
批改状态：未批改
老师批语：
大家好：
以下是我对新建节点的添加和已在节点的移动到目标节点的联系，如有错误望大家指出，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将节点添加或移动到目标节点的方法</title>
</head>
<body>
<div>
<ul>
<li><img src="images/zly.jpg" alt="" width="200"></li>
<li><img src="images/fbb.jpg" alt="" width="200"></li>
<li><img src="images/gyy.jpg" alt="" width="200"></li>
<li><img src="images/sl.jpg" alt="" width="200"></li>
</ul>
<button>移动</button>
<p>这是赵丽颖</p>
<p>这是范冰冰</p>
<p>这是高圆圆</p>
<p>这是孙俪</p>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//获取button按钮，并给按钮添加一个点击事件
$('button').on('click',function(){
// 创建一个节点（img），并给这个节点添加css样式
var img = $('<img src="images/boy.jpeg">').css('width','300').css('box-shadow','3px 3px 3px #888').css('border-radius','20%')
// 将创建的这个节点插入到ul内容区的最后面
img.appendTo($('ul'))
//将第四个p标签移到ul内容区的最后面
$('p').eq(3).appendTo('ul')
// 将创建的这个节点插入到ul内容区的最前面
img.prependTo($('ul'))
//将第1个p标签移到ul内容区的最后面
$('p').eq(0).prependTo('ul')
// 将创建的这个节点插入到目标节点的后面(第一个li标签后面)
img.insertAfter($('li:eq(0)'))
//将第三个p标签移动到指定目标节点后面（第二个li标签）
$('p').eq(2).insertAfter($('li:eq(1)'))
// 将创建的这个节点插入到目标节点的后面(第四个li标签前面)
img.insertBefore($('li:eq(3)'))
//将第二个p标签移动到指定目标节点前面（第二个li标签）
$('p').eq(1).insertBefore($('li:eq(1)'))
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
课程总结
通过这节课程我总结了以下的知识点：
1.appendTo（）的功能和用法：
语法: content.appendTo(target)—例如：li.appendTo($('ul')) ---（将新建节点'li'插入到'ul'内容区的最后面）
参数: 要添加或移动到所在位置作为参考的节点
功能: 插入到目标元素内容的后面
2.prependTo（）的功能和用法：
语法: content.prepend(target)—例如：$('p:eq(1)').prependTo($('ul')) ---（将已存在的第二个节点'li'插入 到'ul'内容区的最前面）
参数: 要添加或移动到所在位置作为参考的节点
功能: 插入到目标元素内容的前面
3.insertAfter（）的功能和用法：
语法: content.after(target)—例如：img.insertAfter($('li:eq(0)'))---（将创建的这个节点插入到目标节点的后面）
参数: 要添加或移动到所在位置作为参考的节点
功能: 插入到指定目标节点的后面
4.insertBefore（）的功能和用法：
语法: content.insertBefore(target)—例如：$('p').eq(1).insertBefore($('li:eq(1)'))---（将第二个p标签移动到指定 目标节点前面）
参数:要添加或移动到所在位置作为参考的节点
功能: 插入到指定目标节点的前面
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
