![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" name="button2" class="button" value="添加图片元素">
<input type="button" name="button3" class="button" value="appendTo()添加元素到内部最后一项">
<input type="button" name="button4" class="button" value="prependTo()添加元素到内部第一项">
<input type="button" name="button5" class="button" value="insertAfter()添加元素到另一元素指定项后面">
<input type="button" name="button6" class="button" value="insertBefore()添加元素到另一元素指定项前面">
<form>
邮箱: <input type="text" name="email">
<input type="button" name="button1" class="button" value="提交">
</form>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<p style="background-color: orange;width: 300px;">我是要被appendTo()移动的节点1</p>
<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的节点2</p>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</p>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()()移动的节点4</p>
</body>
</html>
<script>
$('input[name="button1"]').click(function() {
//读取value属性的值
alert($(':text').val())
})
$('input[name="button2"]').click(function() {
$('<img>').attr('src', '../images/gyy.jpg').css('width', '200px').css('border-radius', '10%').css('box-shadow', '3px 3px 3px #888').appendTo('body')
})
$('input[name="button3"]').click(function() {
$('p:first').appendTo($('ul'))
})
$('input[name="button4"]').click(function() {
$('p:eq(1)').prependTo($('ul'))
})
$('input[name="button5"]').click(function() {
$('p:eq(2)').insertAfter($('li:eq(1)'))
})
$('input[name="button6"]').click(function() {
$('p:eq(3)').insertBefore($('li:eq(1)'))
})
</script> 