jquery dom 节点append、before、after、prepend、insertBefore、empty、remove等添加、移除操作汇总

其他 2019-03-28 11:21:15 阅读次数: 0
版权声明：本文为博主原创文章，转载请注明出处！ https://blog.csdn.net/chuangxin/article/details/88534405

之前有个项目前端页面会根据权限进行DOM操作，比如：增加新增、编辑按钮，增加表格操作列等，涉及节点新增、某个节点前后插入、节点移除等操作，在此，对jquery DOM节点的各种操作做一总结。

1、父节点内容最后面增加子节点

1）append, 父节点.append(子节点), 本文DEMO代码段如下：
$(".container1").append("<input class='form-control input-sm'></input>");	//增加一个新的子节点
$(".container2").append($(obj).prev());	//将已有节点移动到父节点最后面，注意"移动"
2）appendTo, 子节点.appendTo(父节点), 本文DEMO代码段如下：
$("<input class='form-control input-sm'></input>").appendTo($(".container3"));	// 增加一个新的子节点
$(obj).prev().appendTo($(".container4"));	// 将已有节点移动到父节点最后面，注意"移动"

2、父节点内容最前面增加子节点

1）prepend, 父节点.prepend(子节点), 本文DEMO代码段如下：
$(".container21").prepend("<input class='form-control input-sm'></input>");	//增加一个新的子节点
$(".container22").prepend($(obj).prev());	//将已有节点移动到父节点最前面，注意"移动"
2）prependTo, 子节点.prependTo(父节点), 本文DEMO代码段如下：
$("<input class='form-control input-sm'></input>").prependTo($(".container23"));	// 增加一个新的子节点
$(obj).prev().prependTo($(".container24"));		// 将已有节点移动到父节点最前面，注意"移动"

3、兄弟节点前面增加节点

1）before, 小弟.before(大哥), 本文DEMO代码段如下：
$(obj).before('<button type="button" class="btn btn-sm btn-info" style="margin-right: 15px">按钮哥</button>')	// 目标节点前增加一个新节点
$(obj).before($("#btn31"));		// 将节点#btn31 移到 目标节点前面
2）insertBefore, 大哥.insertBefore(小弟), 本文DEMO代码段如下：
$('<button type="button" class="btn btn-sm btn-info" style="margin-right: 15px">按钮哥</button>').insertBefore($(obj));		// 增加一个新节点到目标节点前
$("#btn32").insertBefore($(obj));				// 移动一个节点到目标节点前

4、兄弟节点后面增加节点

1）after, 大哥.after(小弟), 本文DEMO代码段如下：
$(obj).after('<button type="button" class="btn btn-sm btn-info" style="margin-left: 15px">按钮老弟</button>')	// 目标节点后面增加一个新节点
$(obj).after($("#btn41"));		// 将节点#btn41 移到 目标节点后面
2）insertAfter, 小弟.insertAfter(大哥), 本文DEMO代码段如下：
$('<button type="button" class="btn btn-sm btn-info" style="margin-left: 15px">按钮老弟</button>').insertAfter($(obj));			// 增加一个新节点到目标节点后
$("#btn42").insertAfter($(obj));				// 移动一个节点到目标节点后

5、节点移除

1）$(selctor).empty(), 彻底移除文本及子节点dom、事件绑定、数据
2）$(selctor).remove()，dom、数据、事件移除，jquery对象还在，代码段：
$btn52.data("oldData", "oldData");
$btn52.remove();
console.log($btn52.attr('id'), $btn52.attr('oldData'));	//btn52, undefined

6、本文完整DEMO

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>jquery-dom</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
	
	<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="page-content container">
	<div class='page-body'>
	<div class='panel panel-default form-inline'>
		<div class="panel-heading"><h3 class='panel-title'>父节点内容最后面增加子节点</h3></div>
		<table class='table table-bordered'>
			<tbody>
				<tr>
				<td width=35>1</td>
				<td width="70%">append, <button class='btn btn-sm btn-primary' type='button' onclick='append()'>提交</button></td>
				<td width="30%">
					<div class="form-group container1">
						<label class='control-label'>append: </label>
					</div>
				</td></tr>
				<tr>
				<tr>
				<td>2</td>
				<td>append, 将一个已有的节点添加到container2, 并从原来的dom位置移除 <input class='form-control input-sm'></input>
					<button class='btn btn-sm btn-primary' type='button' onclick='append2(this)'>提交</button></td>
				<td>
					<div class="form-group container2">
						<label class='control-label'>append: </label>
					</div>
				</td></tr>
				<tr>
				<td>3</td>
				<td>appendTo, <button class='btn btn-sm btn-primary' type='button' onclick='appendTo()'>提交</button></td>
				<td>
					<div class="form-group container3">
						<label class='control-label'>appendTo: </label>
					</div>
				</td></tr>
				<tr>
				<tr>
				<td>4</td>
				<td>appendTo, <input class='form-control input-sm'></input>
					<button class='btn btn-sm btn-primary' type='button' onclick='appendTo2(this)'>提交</button></td>
				<td>
					<div class="form-group container4">
						<label class='control-label'>appendTo: </label>
					</div>
				</td></tr>
			</tbody>
		</table>
	</div>
	<div class='panel panel-default form-inline'>
		<div class="panel-heading"><h3 class='panel-title'>父节点内容最前面增加子节点</h3></div>
		<table class='table table-bordered'>
			<tbody>
				<tr>
				<td width=35>1</td>
				<td width="70%">prepend, <button class='btn btn-sm btn-primary' type='button' onclick='prepend()'>提交</button></td>
				<td width="30%">
					<div class="form-group container21">
						<label class='control-label'>: prepend</label>
					</div>
				</td></tr>
				<tr>
				<tr>
				<td>2</td>
				<td>prepend, 将一个已有的节点添加到container2, 并从原来的dom位置移除 <input class='form-control input-sm'></input>
					<button class='btn btn-sm btn-primary' type='button' onclick='prepend2(this)'>提交</button></td>
				<td>
					<div class="form-group container22">
						<label class='control-label'>: prepend</label>
					</div>
				</td></tr>
				<tr>
				<td>3</td>
				<td>prependTo, <button class='btn btn-sm btn-primary' type='button' onclick='prependTo()'>提交</button></td>
				<td>
					<div class="form-group container23">
						<label class='control-label'>: prependTo</label>
					</div>
				</td></tr>
				<tr>
				<tr>
				<td>4</td>
				<td>prependTo, <input class='form-control input-sm'></input>
					<button class='btn btn-sm btn-primary' type='button' onclick='prependTo2(this)'>提交</button></td>
				<td>
					<div class="form-group container24">
						<label class='control-label'>: prependTo</label>
					</div>
				</td></tr>
			</tbody>
		</table>
	</div>	
	<div class="panel panel-default">
		<div class="panel-heading"><h3 class='panel-title'>目标节点前面增加一个节点，兄弟关系</h3></div>
		<table class='table table-bordered'>
			<tbody>
				<tr>
				<td width=35>1</td>
				<td width="70%">before, <button class='btn btn-sm btn-primary' type='button' onclick='before(this)'>点我，增加一个按钮哥</button></td>
				<td width="30%">
				</td></tr>
				<tr>
				<tr>
				<td>2</td>
				<td>before, <button class='btn btn-sm btn-primary' type='button' onclick='before2(this)'>将右边按钮移过来当我"哥"</button></td>
				<td>
					<button class='btn btn-sm btn-info' id="btn31" type='button' style="margin-right:15px">按钮哥</button>
				</td></tr>
				<tr>
				<td>3</td>
				<td>insertBefore, <button class='btn btn-sm btn-primary' type='button' onclick='insertBefore1(this)'>点我，增加一个按钮哥</button></td>
				<td></td></tr>
				<tr>
				<td>4</td>
				<td>insertBefore, <button class='btn btn-sm btn-primary' type='button' onclick='insertBefore2(this)'>将右边按钮移过来当我"哥"</button></td>
				<td>
					<button class='btn btn-sm btn-info' id="btn32" type='button' style="margin-right:15px">按钮哥</button>
				</td></tr>																												
			</tbody>
		</table>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading"><h3 class='panel-title'>目标节点后面增加一个节点，兄弟关系</h3></div>
		<table class='table table-bordered'>
			<tbody>
				<tr>
				<td width=35>1</td>
				<td width="70%">after, <button class='btn btn-sm btn-primary' type='button' onclick='after(this)'>点我，增加一个小弟</button></td>
				<td width="30%">
				</td></tr>
				<tr>
				<tr>
				<td>2</td>
				<td>after, <button class='btn btn-sm btn-primary' type='button' onclick='after2(this)'>将右边按钮移过来当我"小弟"</button></td>
				<td>
					<button class='btn btn-sm btn-info' id="btn41" type='button' style="margin-left:15px">按钮老弟</button>
				</td></tr>
				<tr>
				<td>3</td>
				<td>insertAfter, <button class='btn btn-sm btn-primary' type='button' onclick='insertAfter1(this)'>点我，增加一个按钮小弟</button></td>
				<td></td></tr>
				<tr>
				<td>4</td>
				<td>insertAfter, <button class='btn btn-sm btn-primary' type='button' onclick='insertAfter2(this)'>将右边按钮移过来当我"小弟"</button></td>
				<td>
					<button class='btn btn-sm btn-info' id="btn42" type='button' style="margin-left:15px">按钮老弟</button>
				</td></tr>																												
			</tbody>
		</table>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading"><h3 class='panel-title'>节点移除</h3></div>
		<table class='table table-bordered'>
			<tbody>
				<tr>
				<td width=35>1</td>
				<td width="70%">empty, 彻底移除文本及子节点的dom、jquery对象、数据、事件全部移除, 节点本身仍在
					<button class='btn btn-sm btn-primary' type='button' id="btn51" onclick='empty(this)'>移除我: btn51</button></td>
				<td width="30%"><button class='btn btn-sm btn-primary' type='button' onclick='show(this)'>查看 btn51</button>
				</td></tr>
				<tr>
				<tr>
				<td>2</td>
				<td>remove, <button class='btn btn-sm btn-primary' type='button' id="btn52"  onclick='remove(this)'>移除我：btn52</button></td>
				<td>
					<button class='btn btn-sm btn-primary' type='button' onclick='show2(this)'>查看 btn52</button>
				</td></tr>
				<tr>
			</tbody>
		</table>
	</div>			
	</div>
</div>
<script type="text/javascript">
	function append() {
		$(".container1").append("<input class='form-control input-sm'></input>");
	}
	function append2(obj) {
		$(".container2").append($(obj).prev());
	}
	function appendTo() {
		$("<input class='form-control input-sm'></input>").appendTo($(".container3"));
	}
	function appendTo2(obj) {
		$(obj).prev().appendTo($(".container4"));
	}
	function prepend() {
		$(".container21").prepend("<input class='form-control input-sm'></input>");
	}
	function prepend2(obj) {
		$(".container22").prepend($(obj).prev());
	}
	function prependTo() {
		$("<input class='form-control input-sm'></input>").prependTo($(".container23"));
	}
	function prependTo2(obj) {
		$(obj).prev().prependTo($(".container24"));
	}
	function before(obj) {
		$(obj).before('<button type="button" class="btn btn-sm btn-info" style="margin-right: 15px">按钮哥</button>')
	}
	function before2(obj) {
		$(obj).before($("#btn31"));
	}
	
	function insertBefore1(obj) {
		$('<button type="button" class="btn btn-sm btn-info" style="margin-right: 15px">按钮哥</button>').insertBefore($(obj));
	}
	function insertBefore2(obj) {
		$("#btn32").insertBefore($(obj));
	}
	
	function after(obj) {
		$(obj).after('<button type="button" class="btn btn-sm btn-info" style="margin-left: 15px">按钮老弟</button>')
	}
	function after2(obj) {
		$(obj).after($("#btn41"));
	}
	
	function insertAfter1(obj) {
		$('<button type="button" class="btn btn-sm btn-info" style="margin-left: 15px">按钮老弟</button>').insertAfter($(obj));
	}
	function insertAfter2(obj) {
		$("#btn42").insertAfter($(obj));
	}
	
	var $btn51 = $("#btn51");
	function empty(obj) {
		$(obj).empty();
	}
	function show() {
		console.log($btn51, $btn51.attr('id'));
	}
	
	var $btn52 = $("#btn52");
	$btn52.data("oldData", "oldData");
	function remove(obj) {
		$(obj).remove();
	}
	function show2() {
		console.log($btn52, $btn52.attr('id'), $btn52.attr('oldData'));
	}
	
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/chuangxin/article/details/88534405
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022