jQuery文档增删
文档操作方法详解
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17_文档_增删改title>
head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
/*top: 50px;*/
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
style>
<body>
<ul id="ul1">
<li>AAAAAli>
<li title="hello">BBBBBli>
<li class="box">CCCCCli>
<li title="hello">DDDDDDli>
<li title="two">EEEEEli>
<li>FFFFFli>
ul>
<br>
<br>
<ul id="ul2">
<li>aaali>
<li title="hello">bbbli>
<li class="box">cccli>
<li title="hello">dddli>
<li title="two">eeeli>
ul>
<script src="js/jquery-1.10.1.js" type="text/javascript">script>
<script type="text/javascript">
/*
需求:
1. 向id为ul1的ul下添加一个span(最后)
2. 向id为ul1的ul下添加一个span(最前)
3. 在id为ul1的ul下的li(title为hello)的前面添加span
4. 在id为ul1的ul下的li(title为hello)的后面添加span
5. 将在id为ul2的ul下的li(title为hello)全部替换为p
6. 移除id为ul2的ul下的所有li
*/
//1. 向id为ul1的ul下添加一个span(最后)
var $ul1 = $('#ul1')
// $ul1.append('append()添加的span')
$('appendTo()添加的span').appendTo($ul1)
//2. 向id为ul1的ul下添加一个span(最前)
// $ul1.prepend('prepend()添加的span')
$('prependTo()添加的span').prependTo($ul1)
//3. 在id为ul1的ul下的li(title为hello)的前面添加span
$ul1.children('li[title=hello]').before('before()添加的span')
//4. 在id为ul1的ul下的li(title为hello)的后面添加span
$ul1.children('li[title=hello]').after('after()添加的span')
//5. 将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('replaceAll()替换的p
')
//6. 移除id为ul2的ul下的所有li
// $('#ul2').empty() // 也会删除
$('#ul2>li').remove()
script>
body>
html>