jquery dom 节点append、before、after、prepend、insertBefore、empty、remove等添加、移除操作汇总
2024-04-15 08:13:07
之前有个项目前端页面会根据权限进行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>
jquery dom 节点append、before、after、prepend、insertBefore、empty、remove等添加、移除操作汇总相关推荐
- jQuery DOM节点操作
开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:执~漠 撰写时间:2020年4月22日 在 HTML DOM 中,所有事物都是节点. jQuery创建节点 jQue ...
- jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
- jquery dom节点操作完成备考抽查演练和英雄排名表
1.备考抽查演练 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
- php中append,插入节点append()、insertAfter()的特殊用法：对原有DOM元素进行移动
插入节点的方法: append()/appendTo().prepend()/prependTo().after()/insertAfter().before/insertBefore() 这些插入节 ...
- Jquery操作DOM节点
1. 向DOM节点中追加元素: append:向元素内部追加内容: 例如:<p>我想说:</p> $("p").append(" ...
- 前端框架——Jquery——基础篇2__获取DOM节点的值
对于获取DOM节点的内容,Jquery提供了四种方法,html,text,val,attr.下面来分别介绍这四种方法和它们的区别.下面以例子来说明 我写的JSP页面内容如下: 1 <div id ...
- DOM节点创建（jQuery）
1DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况: ...
最新文章
- 扎克伯格曝光Meta的小目标：AI自动生成元宇宙，实时翻译所有语言
- 基于网格的空间数据组织
- 技术MBA高科技企业的“宠儿”
- python的等待代码是什么_Python selenium 三种等待方式详解
- 【MySQL】Linux 命令启动 mysql
- java 加载spring_spring的加载机制？
- 「leetcode」234. 回文链表:【数组模拟】【翻转后半部分】详解
- 【最短路】 ZOJ 1544 Currency Exchange 判断负圈
- invocation, 作者 Medwyn Goodall,女巫医 [搜索 invocation Medwyn Goodall]
- python人脸对比相似度_Python比较两个图片相似度的方法
- Win10怎么提高显卡游戏性能
- wincc c 语言改颜色,wincc常用c脚本小草设置
- PAI FrameworkLauncher(5)--节点选择SelectionManager
- Java | 参数（Parameter）
- 高阶 numpy 数组快速插值（高阶快插）算法探讨
- 彻底搞清分库分表（垂直分库，垂直分表，水平分库，水平分表）
- Java生成骑缝章带有CA电子签名认证
- 为什么采购订单管理非常重要？
- Linux中级——“驱动” 控制硬件必须学会的底层知识
- Python中For循环与While 循环的使用