當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery DOM 节点操作

發布時間：2025/3/15 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery DOM 节点操作小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

DOM 中有一個非常重要的功能，就是節點模型，也就是 DOM 中的“M”。頁面中的元素結構就是通過這種節點模型來互相對應著的，我們只需要通過這些節點關系，可以創建、插入、替換、克隆、刪除等等一些列的元素操作。

一．創建節點

為了使頁面更加智能化，有時我們想動態的在 html 結構頁面添加一個元素標簽，那么在插入之前首先要做的動作就是：創建節點。

var box=$('<div id="box">節點</div>'); //創建一個節點 $('body').append(box); //將節點插入到<body>元素內部

二．插入節點

在創建節點的過程中，其實我們已經演示怎么通過.append()方法來插入一個節點。但除了這個方法之余呢，jQuery 提供了其他幾個方法來插入節點。

$('div').append('節點'); //向 div 內部插入 strong 節點 $('div').append(function(index,html){ //使用匿名函數插入節點，html 是原節點 return '節點'; }); $('span').appendTo('div'); //講 span 節點移入 div 節點內 $('span').appendTo($('div')); //同上 $('div').prepend('節點'); //將 span 插入到 div 內部的前面 $('div').append(function(index,html){ //使用匿名函數，同上 return '節點'; }); $('span').prependTo('div'); //將 span 移入 div 內部的前面 $('span').prependTo($('div')); //同上

$('div').after('節點'); //向 div 的同級節點后面插入 span $('div').after(function(index,html){ //使用匿名函數，同上 return'節點'; }); $('div').before('節點'); //向 div 的同級節點前面插入 span $('div').before(function(index,html){ //使用匿名函數，同上 return'節點'; }); $('span').insertAfter('div'); //將 span 元素移到 div 元素外部的后面 $('span').insertBefore('div'); //將 span 元素移到 div 元素外部的前面

三．包裹節點

jQuery 提供了一系列方法用于包裹節點，那包裹節點是什么意思呢？其實就是使用字符串代碼將指定元素的代碼包含著的意思

$('div').wrap(''); //在 div 外層包裹一層 strong $('div').wrap('123'); //包裹的元素可以帶內容 $('div').wrap(''); //包裹多個元素 $('div').wrap($('strong').get(0)); //也可以包裹一個原生 DOM $('div').wrap(document.createElement('strong')); //臨時的原生 DOM $('div').wrap(function(index){ //匿名函數 return ''; }); $('div').unwrap(); //移除一層包裹內容，多個需移除多次 $('div').wrapAll(''); //所有 div 外面只包一層 strong $('div').wrapAll($('strong').get(0)); //同上 $('div').wrapInner(''); //包裹子元素內容 $('div').wrapInner($('strong').get(0)); //DOM 節點 $('div').wrapInner(function(){ //匿名函數 return ''; });

注意：.wrap()和.wrapAll()的區別在前者把每個元素當成一個獨立體，分別包含一層外層；后者將所有元素作為一個整體作為一個獨立體，只包含一層外層。這兩種都是在外層包含，而.wrapInner()在內層包含。

四．節點操作

除了創建、插入和包裹節點，jQuery 還提供了一些常規的節點操作方法：復制、替換和刪除節點。

//復制節點 $('body').append($('div').clone(true)); //復制一個節點添加到 HTML 中注意：clone(true)參數可以為空，表示只復制元素和內容，不復制事件行為。而加上 true 參數的話，這個元素附帶的事件處理行為也復制出來。 //刪除節點 $('div').remove(); //直接刪除 div 元素注意：.remove()不帶參數時，刪除前面對象選擇器指定的元素。而.remove()本事也可以帶選擇符參數的，比如：$('div').remove('#box');只刪除 id=box 的 div。 //保留事件的刪除節點 $('div').detach(); //保留事件行為的刪除注意：.remove()和.detach()都是刪除節點，而刪除后本身方法可以返回當前被刪除的節點對象，但區別在于前者在恢復時不保留事件行為，后者則保留。//清空節點 $('div').empty(); //刪除掉節點里的內容 //替換節點 $('div').replaceWith('節點'); //將 div 替換成 span 元素 $('節點').replaceAll('div'); //同上

注意：節點被替換后，所包含的事件行為就全部消失了。

轉載于:https://www.cnblogs.com/Waiting-for-you/p/4154736.html

總結

以上是生活随笔為你收集整理的jQuery DOM 节点操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： AzCopy – 上传/下载 Windo
下一篇： Android 学习笔记_05. 文件