收藏
批改状态：合格
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将节点添加或移动到目标节点-4月4日作业</title>
<style type="text/css">
body{
text-align: center;
}
div{
width: 350px;
background-color: lightyellow;
border: 1px solid seagreen;
margin: 20px auto;
text-align: center;
box-shadow: 3px 3px 3px #555;
overflow: hidden;
}
p{
background-color: lightgreen;
width: 60%;
margin: auto;
}
.button{
float: left;
margin: 10px 0 10px 70px;
}
.question,.button{
background-color: lightpink;
}
button{
width: 60px;
border-radius: 10%;
background-color: orangered;
color: white;
height: 100%;
}
.box p{
clear: both;
}
</style>
</head>
<body>
<!-- 实例演示:
appendTo(),prependTo(),insertAfter(),insertBefore()
发博客时，必须写明这些方法的用途，参数，以及返回值 -->
<h2>将下列古诗信息正确添写完整</h2>
<hr>
<div class="box">
<p id="bp1">黄河远上白云间，</p>
<p id="bp3"></p>
<p id="bp4"></p>
<p id="bp5"></p>
</div>
<div class="question">
<button>A</button><p class="button">《凉州词》</p>
</div>
<div class="question">
<button>B</button><p class="button">唐代 王之涣</p>
</div>
<div class="question">
<button>C</button><p class="button">一片孤城万仞山。</p>
</div>
<div class="question">
<button>D</button><p class="button">羌笛何须怨杨柳，</p>
</div>
<div class="question">
<button>E</button><p class="button">春风不度玉门关。</p>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 1.prependTo()
// 用途：将匹配节点添加或转移到目标节点的起始位置。
// 语法：$(selector).prependTo(target)。
// 参数：要添加或移动的节点。
// 返回值：添加内容的jQuery对象。
//给按钮A添加点击事件。
$('button').eq(0).on('click',function(){
// 使用prependTo()方法，将按钮A对应的古诗名称添加到古诗所在div的最前面。并设定字体样式。
$('.button:first').prependTo($('.box')).css('font-weight','bold').css('font-size','larger')
})
//2.insertBefore()
// 用途：将匹配节点插入到目标节点的前面。
// 语法：$(selector).insertBefore(target)。
// 参数：要添加或移动的节点。
// 返回值：添加内容的jQuery对象。
//给按钮B添加点击事件。
$('button').eq(1).on('click',function(){
// 使用insertBefore()方法，将按钮B对应的作者添加到“黄河远上白云间”前面。并设定字体样式。
$('.button:eq(1)').insertBefore($('#bp1')).css('font-size','14px').css('margin-bottom','10px')
})
//3.insertAfter()
// 用途：将匹配节点插入到目标节点的后面。
// 语法：$(selector).insertAfter(target)。
// 参数：要添加或移动的节点。
// 返回值：添加内容的jQuery对象。
//给按钮C添加点击事件。
$('button').eq(2).on('click',function(){
// 使用insertAfter()方法，将按钮C对应的古诗内容添加到古诗第一句的后面。
$('.button:eq(2)').insertAfter($('#bp3'))
})
//给按钮D添加点击事件。同样使用insertAfter()方法添加节点。
$('button').eq(3).on('click',function(){
// 使用insertAfter()方法，将按钮D对应的古诗内容添加到相应位置。
$('.button:eq(3)').insertAfter($('#bp4'))
})
//4.appengTo()
// 用途：将匹配节点添加或转移到目标节点的最后位置。
// 语法：$(selector).appendTo(target)。
// 参数：要添加或移动的节点。
// 返回值：添加内容的jQuery对象。
//给按钮E添加点击事件。使用appendTo()方法添加节点。
$('button').eq(4).on('click',function(){
// 使用appendTo()方法，将按钮E对应的古诗内容添加到古诗所在div的最后面。
$('.button:eq(4)').appendTo($('.box'))
})
</script>点击 "运行实例" 按钮查看在线实例
小结：
在实际练习过程中，一开始对获取目标节点操作还是不熟练，另外代码也没有达到实际想像的要求，也可能是示例不适合做演示。感觉想要达到实际效果，后面两句使用text(‘content’)方法更合适。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
