收藏
批改状态：合格
老师批语：
主题：
熟练掌握jquery对DOM的增删改查操作，注意区别append(),prepend(),after(),before()与appendTo(),prependTo(),insertAfter(),insertBefore()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的DOM增删改操作</title>
<style type="text/css">
.box {
width:400px;
height:500px;
border:5px solid #ddd;
background-color: #ddd;
box-shadow: 2px 2px 2px #555;
margin:0 auto;
}
li {
background-color: pink;
margin-bottom: 5px;
}
p {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
</ul>
<form action="" method="">
<input type="text">
<button value="btn">btn</button>
</form>
<ol>
<li>
<p>第一个P</p>
</li>
<li>
<p>第二个P</p>
</li>
<li>
<p>第三个P</p>
</li>
<li>
<p>第四个P</p>
</li>
</ol>
<a href="">第一个a</a>
<a href="">第二个a</a>
<a href="">第三个a</a>
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//生成新元素：$('<p>')
var req = $('<p>').text('新生成的节点').css('background-color','lightgreen')
//1.元素内容：html(),text(),val()
// $('li').eq(0).html('<a href=""></a>') //生成一个新的html元素
// $('a').eq(0).text('生成第一个a标签里的文本') //生成元素里的文本
// var req = $('li').eq(0).html() //获取html元素
// $('button').eq(0).click(function(){
// alert($(':text').val()) //$(':text').val()获取表单元素输入的内容
// })
//2.向目标节点插入元素：append(),prepend(),after(),before()
// $('ol').append(req) //向目标元素ol（后面）插入新生成的节点req
// $('p').eq(0).append($('li:first')) //向目标元素第一个p元素（后面）移动已有节点第一个li
// $('ol').prepend(req) //向目标元素ol（前面）插入新生成的节点req
// $('p').eq(0).prepend($('li:first')) //向目标元素第一个p元素（前面）移动已有节点第一个li
// $('ul').after(req) //向目标元素后面插入新生成的节点
// $('ul').before(req) //向目标元素前面插入新生成的节点
//区别：append和prepend是在元素内部，after和before是在元素外部
//3.把节点插入目标节点：appendTo(),prependTo(),insertAfter(),insertBefore()，适合链式调用
//用法与append(),prepend(),after(),before()目标位置正好相反，用法相同
// $(req).appendTo('ul') //插入的节点在目标元素内部
// $(req).prependTo('ul') //插入的节点在目标元素内部
// $(req).insertAfter('ul') //插入的节点在目标元素外部
// $(req).insertBefore('ul') //插入的节点在目标元素外部
//4.包裹元素：wrap(),wrapInner(),wrapAll(),unwarp()
// $('a').wrap('<p>') //用新标签包裹每一个节点a
// $('a').wrap('li') //用已经存在的标签包裹每个a标签
// $('a').wrap('li').parent().parent() //链式操作选中父元素
// $('a').wrapInner('p') //用P包裹节点的内容
// $('a').wrapAll('<p style="background-color:grey;">') //用P一次性包裹一组a元素，不是每个分别包裹
// $('ol li').unwrap() //删除节点上的父元素,无参数
</script>
</html>点击 "运行实例" 按钮查看在线实例
理解：
主要要区别4种插入节点的区别和使用方法。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
