收藏
批改状态：合格
老师批语：
将节点添加或移动到目标节点或者内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.将节点添加或移动到目标节点</title>
<style type="text/css">
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li><img src="images/k.jpg" alt="图片" title="凯" width="100"></li>
<li><img src="images/yz.jpg" alt="图片" title="嬴政" width="100"></li>
<li><img src="images/lb.jpg" alt="图片" title="李白" width="100"></li>
<li><img src="images/cc.jpg" alt="图片" title="曹操" width="100"></li>
<li><img src="images/mkbl.jpg" alt="图片" title="马可波罗" width="100"></li>
</ul>
<button>appendTo</button>
<button>prependTo</button>
<button>insertAfter</button>
<button>insertBefore</button>
<p style="color: lightskyblue"><em>凯：无限接近死亡，更能醒悟生存的真谛</em></p>
<p style="color: red"><em>嬴政：朕会用宽广的心胸包容美女们的大不敬</em></p>
<p style="color: gray"><em>李白：永生不会是一场梦幻唯吾所爱不朽</em></p>
<p style="color: pink"><em>曹操：你对我的价值决定我对你的估值</em></p>
</body>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.插入位置:
// 1.1:节点内容的前后
// 1.2:节点的前后
// 2.要插入的节点:
// 2.1: 对于新创建的节点:叫添加操作
// 2.2: 对已存在的节点: 叫移动操作
// 3.所以对应的应该有四个方法
// 3.1:插入到节点内容之后:appendTo()
// 3.2:插入到节点内容之前:prependTo()
// 3.3:插入到节点之后: InsertAfter()
// 3.3:插入到节点之前: InsertBefore()
$('button').eq(0).on('click',function(){
// 1.appendTo()
// 语法: content.appendTo(target)
// 参数: 要添加或移动到的节点
// 功能: 插入到目标元素内容的后面
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
// var li = $('<li>').html('<img src="images/mkbl.jpg" alt="图片" width="100"/>')
//第二步: 将新节点插入到目标节点内容的后面
// li.appendTo($('ul'))
//2.移动操作(将添加操作的代码注释掉)
// $('p').eq(0).appendTo($('ul'))
$('p').eq(0).appendTo($('li').eq(0))
})
///////////////////////////////////////////////////////////
// 2.prependTo()
// 语法: content.prependTo(target)
// 参数: 要添加或移动的节点
// 功能: 插入到目标元素内容的前面
$('button').eq(1).click(function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
// var li = $('<li>').html('<img src="images/mkbl.jpg" alt="图片" width="100"/>')
//第二步: 将新节点插入到目标节点内容的后面
// li.prependTo($('ul'))
//2.移动操作(将添加操作的代码注释掉)
// $('p:eq(1)').prependTo($('li:eq(1)'))
$('p:eq(1)').prependTo('li:eq(2)')
})
///////////////////////////////////////////////////////////////////
// 3.insertAfter()
// 语法: content.insertAfter(target)
// 参数: 要插入的节点
// 功能: 插入到目标节点的后面
$('button:eq(2)').on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
// var div = $('<div>').html('<img src="images/mkbl.jpg" alt="图片" width="100" title="马可波罗"/>')
//第二步: 将新节点插入到目标节点的后面
// div.insertAfter($('ul'))
//2.移动操作(将添加操作的代码注释掉)
// 移动到<ul>的后面
// $('p').eq(2).insertAfter($('ul'))
// 移动到第三个<li>的后面
$('p:eq(2)').insertAfter($('li:eq(2)'))
})
//////////////////////////////////////////////////////////////
$('button').eq(3).click(function(){
// 4.InsertBefore()
// 语法: content.insertBefore(target)
// 参数: 要插入的节点
// 功能: 插入到目标元素的前面
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
// var div = $('<div>').html('<img src="images/mkbl.jpg" alt="图片" width="100" title="马可波罗"/>')
//第二步: 将新节点插入到目标节点的后面
// div.insertBefore($('ul'))
//插到四个<li>的前面
// div.insertBefore($('li:eq(3)'))
//2.移动操作(将添加操作的代码注释掉)
//移动到<ul>之前
// $('p:eq(3)').insertBefore('ul')
//移动到第五个<li>的前面
$('p').eq(3).insertBefore($('li:eq(4)'))
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
效果图片：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
