13、添加元素的几种方式
2022-08-31 本文已影响0人
一直流浪
添加元素的几种方式：
（1）append()
- 父元素.append(子元素)，把子元素添加到父元素的末尾
- 新创建标签，添加到父元素中，会添加到父元素的末尾
- 将已有的标签元素，添加到父元素中，会剪贴到父元素末尾
（2）prepend()
- 父元素.prepend(子元素)，把子元素添加到父元素的头部
- 新创建标签，添加到父元素中，会添加到父元素的头部
- 将已有的标签元素，添加到父元素中，会剪贴到父元素头部
（3）before()
- 元素A.prepend(元素B)，把元素B添加到元素A的兄弟元素，添加到A的头部
（4）after()
- 元素A.after(元素B) 把元素B作为元素A的兄弟元素添加元素A的后面
（5）appendTo()
- 子元素.appendTo(父元素) 把子元素添加到父元素末尾
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="append" id="btnAppend" />
<input type="button" value="prepend" id="btnPrepend" />
<input type="button" value="before" id="btnBefore" />
<input type="button" value="after" id="btnAfter" />
<input type="button" value="appendTo" id="btnAppendTo" />
<ul id="ul1">
<li>我是第1个li标签</li>
<li>我是第2个li标签</li>
<li id="li3">我是第3个li标签</li>
<li>我是第4个li标签</li>
<li>我是第5个li标签</li>
</ul>
<ul id="ul2">
<li>我是第1个li标签2</li>
<li>我是第2个li标签2</li>
<li id="li32">我是第3个li标签2</li>
<li>我是第4个li标签2</li>
<li>我是第5个li标签2</li>
</ul>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//添加标签的几种方式
//1.append()
//父元素.append(子元素)，把子元素添加到父元素的末尾
$('#btnAppend').click(function(){
//1.1 新创建一个li标签，添加ul中去，会添加到父元素的末尾
// var $liNew = $("<li>我是新创建的li标签</li>");
// $('#ul1').append($liNew);
//1.2 把ul1中已经有的元素，再次添加到url中，剪切后作为最后一个元素添加
// var $li3 = $('#li3');
// $('#ul1').append($li3);
//1.3 把ul2中已经存在的标签，添加到ul1中，剪切后作为最后一个元素添加
var $li32 = $('#li32');
$('#ul1').append($li32);
});
//2.prepend()
//父元素.prepend(子元素)，把子元素添加到父元素的头部
$('#btnPrepend').click(function(){
//2.1 新建一个li标签，添加到ul1中，把新元素作为第一个子元素添加
// var $liNew = $("<li>我是新创建的li标签</li>");
// $('#ul1').prepend($liNew);
//2.2 把ul1中已经有的元素，再次添加到url中，剪切后作为第一个元素添加
// var $li3 = $('#li3');
// $('#ul1').prepend($li3);
//1.3 把ul2中已经存在的标签，添加到ul1中，剪切后作为第一个元素添加
var $li32 = $('#li32');
$('#ul1').prepend($li32);
});
//3.before()
//元素A.before(元素B) 把元素B作为元素A的兄弟元素添加元素A的前面
$('#btnBefore').click(function(){
//新建一个div
var $divNew = $('<div>我是新建的div</div>');
$('#ul1').before($divNew);
});
//4.after()
//元素A.after(元素B) 把元素B作为元素A的兄弟元素添加元素A的后面
$('#btnAfter').click(function(){
//新建一个div
var $divNew = $('<div>我是新建的div</div>');
$('#ul1').after($divNew);
});
//5.appendTo()
//子元素.appendTo(父元素) 把子元素添加到父元素末尾
$('#btnAppendTo').click(function(){
var $liNew = $("<li>我是新创建的li标签</li>");
$liNew.appendTo($('#ul1'));
});
})
</script>
案例——城市选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>城市选择</title>
<style type="text/css">
select{
width: 200px;
background: teal;
height: 200px;
font-size: 20px;
}
option{
font-weight: normal;
display: block;
white-space: pre;
padding: 0px 2px 1px;
}
.btn-box{
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1>城市选择</h1>
<select id="src-city" name="src-city" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">杭州</option>
</select>
<div class="btn-box">
<input type="button" value=">>" id="btn-sel-all" />
<input type="button" value="<<" id="btn-sel-none" />
<input type="button" value=">" id="btn-sel" />
<input type="button" value="<" id="btn-back" />
</div>
<select id="tar-city" name="tar-city" multiple="multiple"></select>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//1.全部到右边
$('#btn-sel-all').click(function(){
//找到左边所以的option，剪切到右边的select下
$('#src-city>option').appendTo($('#tar-city'));
});
//1.全部到右边
$('#btn-sel-all').click(function(){
//找到左边所有的option，剪切到右边的select下
$('#src-city>option').appendTo($('#tar-city'));
});
//2.全部到左边
$('#btn-sel-none').click(function(){
//找到右边所有的option，剪切到左边的select下
$('#tar-city>option').appendTo($('#src-city'));
});
//3.选中的到右边
$('#btn-sel').click(function(){
//找到左边选中的option，剪切到右边的select中
// console.log($('#src-city>option:selected'));
$('#src-city>option:selected').appendTo($('#tar-city'));
});
//3.选中的到左边
$('#btn-back').click(function(){
//找到右边选中的option，剪切到左边的select中
// console.log($('#tar-city>option:selected'));
$('#tar-city>option:selected').appendTo($('#src-city'));
});
})
</script>
案例——表格删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格删除</title>
<style>
*{
padding: 0;
margin: 0;
}
table{
border-collapse:collapse ;
border-spacing: 0;
}
thead{
display: table-header-group;
vertical-align: middle;
border-color:inherit ;
}
tbody{
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
th{
padding: 10px 10px;
background-color: skyblue;
border: 1px solid white;
}
td{
padding: 10px 10px;
background-color: #eeeeee;
border: 1px solid #999999;
}
</style>
</head>
<body>
<div class="wrap">
<input type="button" value="清空内容" id="btn" />
<table>
<thead>
<tr>
<th>专栏名称</th>
<th>内容描述</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>JavaSE 学习笔记</td>
<td>参考Oracle官方文档，系统学习JavaSE</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>Oracle数据库笔记</td>
<td>参考Oracle官方文档，系统学习Oracle数据库</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>LeetCode热门算法100道</td>
<td>刷题的必选之路</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>Linux学习笔记</td>
<td>从零学习Linux系统</td>
<td><button class="del">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//1.清空内容
$('#btn').click(function(){
$('#tb').empty();
})
//2.删除一行
$('#tb .del').click(function(){
console.log("123");
console.log($(this));
$(this).parent().parent().remove();
})
})
</script>
q
