jQuery HTML 添加和删除元素
生活随笔
收集整理的這篇文章主要介紹了
jQuery HTML 添加和删除元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery - 添加元素
通過 jQuery，可以很容易地添加新元素/內容。
添加新的 HTML 內容的四個 jQuery 方法：
jQuery append() 方法在被選元素的結尾插入內容。
[javascript] view plaincopy$("p").append("Some?appended?text.");??
jQuery prepend() 方法在被選元素的開頭插入內容。
[javascript] view plaincopy$("p").prepend("Some?prepended?text.");??
jQuery after() 方法在被選元素之后插入內容。
[javascript] view plaincopy$("img").after("Some?text?after");??
jQuery before() 方法在被選元素之前插入內容。
[javascript] view plaincopy$("img").before("Some?text?before");??
這樣能看出來前兩個和后兩個有什么區別么。。。反正我是要琢磨琢磨。。。上代碼分析：
[javascript] view plaincopy<!DOCTYPE?html>?? <html>?? <head>?? <script?src="jquery-1.11.1.js"></script>?? <script>?? $(document).ready(function(){?? ?? ??$("#btn1").click(function(){?? ????$("#test1").prepend("<b>Before</b>");?? ??});?? ??$("#btn2").click(function(){?? ????$("#test1").append("<i>After</i>");?? ??});?? ?? ??$("#btn3").click(function(){?? ????$("#test2").before("<b>Before</b>");?? ??});?? ??$("#btn4").click(function(){?? ????$("#test2").after("<i>After</i>");?? ??});?? ?? });?? </script>?? </head>?? ?? <body>?? <button?id="btn1">在范特西前面添加文本</button>?? <button?id="btn2">在范特西后面添加文本</button>?? <button?id="btn3">在依然范特西前面添加文本</button>?? <button?id="btn4">在依然范特西后面添加文本</button>?? ?? <p?id="test1">范特西</p>?? <p?id="test2">依然范特西</p>?? </body>?? </html>??
感覺貼圖好麻煩。。。還是文字描述吧。。。點完上述4個button后，效果：
是不是發現了什么呀。。。繼續，審查元素：
append() 和?prepend() 方法，在被選元素內（<p>...... ......</p>）插入內容；
after()?和?before()?方法，在被選元素外（......<p> </p>......）插入內容。
jQuery - 刪除元素
通過 jQuery，可以很容易地刪除已有的 HTML 元素。
如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：
jQuery remove() 方法刪除被選元素及其子元素。
[javascript] view plaincopy$("#div1").remove();??
jQuery empty() 方法刪除被選元素的子元素。
[javascript] view plaincopy$("#div1").empty();??
過濾被刪除的元素
jQuery remove() 方法也可以接受一個參數，允許對被刪元素進行過濾。
該參數可以是任何 jQuery 選擇器的語法。
下面的例子刪除 class="italic" 的所有 <p> 元素：
[javascript] view plaincopy$("p").remove(".italic");??
這個地方我思考了一下，“刪除 class="italic" 的所有 <p> 元素”和“刪除?<p>?的所有?class="italic"?元素”是一樣的。。。即：
[javascript] view plaincopy$(".italic").remove("p");??
那么 empty() 方法也可以接受一個參數不？答案是否定的！
另外還有一個問題，看到這樣一段代碼：
[javascript] view plaincopyvar?txt2=$("<p></p>").text("Text.");???//?以?jQuery?創建新元素??
為什么可以寫成上述形式呢？不太清楚其中的規則。。。
（20140603追加對上述問題的理解）
jQuery 核心函數：jQuery(html,[ownerDocument])
根據提供的原始 HTML 標記字符串，動態創建由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。
你可以傳遞一個手寫的 HTML 字符串，或者由某些模板引擎或插件創建的字符串，也可以是通過 AJAX 加載過來的字符串。但是在你創建 input 元素的時會有限制，可以參考第二個示例。當然這個字符串可以包含斜杠 (比如一個圖像地址)，還有反斜杠。（這些現在還不太好理解，可以直接看后面的。）
當你創建單個元素時，請使用閉合標簽或 XHTML 格式。例如，創建一個 span ，可以用$("<span/>") 或$("<span></span>") ，但不推薦 $("<span>")。在jQuery 中，這個語法等同于$(document.createElement("span")) 。
上述代碼等同于：
[javascript] view plaincopyvar?txt2=$("<p>Text.</p>");???//?以?jQuery?創建新元素??
使用變量和直接使用$("<></>") 是不一樣的。最后放一段代碼作為總結：
[javascript] view plaincopy<!DOCTYPE?html>?? <html>?? <head>?? <script?src="jquery-1.11.1.js"></script>?? <script>?? $(document).ready(function(){?? ?? var?txt1=$("<p>Text1</p>");?? var?txt2=$("<p></p>").text("Text2");?? ?? ??$("#btn1").click(function(){?? ????$("p#text1").append(txt1);?? ??});?? ?? ??$("#btn1").click(function(){?? ????$("p#text2").append(txt2);?? ??});?? ?? ??$("#btn2").click(function(){?? ????$("p#text3").append($("<p>Text1</p>"));?? ??});?? ?? ??$("#btn2").click(function(){?? ????$("p#text4").append($("<p></p>").text("Text2"));?? ??});?? ?? });?? </script>?? </head>?? ?? <body>?? <p?id=text1>This?is?a?paragraph.</p>?? <p?id=text2>This?is?another?paragraph.</p>?? <button?id="btn1">只能追加一次文本</button>?? ?? <p?id=text3>This?is?a?paragraph.</p>?? <p?id=text4>This?is?another?paragraph.</p>?? <button?id="btn2">每次都能追加文本</button>?? </body>?? </html>?
通過 jQuery，可以很容易地添加新元素/內容。
添加新的 HTML 內容的四個 jQuery 方法：
- append() - 在被選元素的結尾插入內容
- prepend() - 在被選元素的開頭插入內容
- after() - 在被選元素之后插入內容
- before() - 在被選元素之前插入內容
jQuery append() 方法在被選元素的結尾插入內容。
[javascript] view plaincopy
jQuery prepend() 方法在被選元素的開頭插入內容。
[javascript] view plaincopy
jQuery after() 方法在被選元素之后插入內容。
[javascript] view plaincopy
jQuery before() 方法在被選元素之前插入內容。
[javascript] view plaincopy
這樣能看出來前兩個和后兩個有什么區別么。。。反正我是要琢磨琢磨。。。上代碼分析：
[javascript] view plaincopy
Before范特西After
Before依然范特西
After是不是發現了什么呀。。。繼續，審查元素：
append() 和?prepend() 方法，在被選元素內（<p>...... ......</p>）插入內容；
after()?和?before()?方法，在被選元素外（......<p> </p>......）插入內容。
jQuery - 刪除元素
通過 jQuery，可以很容易地刪除已有的 HTML 元素。
如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：
- remove() - 刪除被選元素（及其子元素）
- empty() - 從被選元素中刪除子元素
jQuery remove() 方法刪除被選元素及其子元素。
[javascript] view plaincopy
jQuery empty() 方法刪除被選元素的子元素。
[javascript] view plaincopy
過濾被刪除的元素
jQuery remove() 方法也可以接受一個參數，允許對被刪元素進行過濾。
該參數可以是任何 jQuery 選擇器的語法。
下面的例子刪除 class="italic" 的所有 <p> 元素：
[javascript] view plaincopy
[javascript] view plaincopy
另外還有一個問題，看到這樣一段代碼：
[javascript] view plaincopy
（20140603追加對上述問題的理解）
jQuery 核心函數：jQuery(html,[ownerDocument])
根據提供的原始 HTML 標記字符串，動態創建由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。
你可以傳遞一個手寫的 HTML 字符串，或者由某些模板引擎或插件創建的字符串，也可以是通過 AJAX 加載過來的字符串。但是在你創建 input 元素的時會有限制，可以參考第二個示例。當然這個字符串可以包含斜杠 (比如一個圖像地址)，還有反斜杠。（這些現在還不太好理解，可以直接看后面的。）
當你創建單個元素時，請使用閉合標簽或 XHTML 格式。例如，創建一個 span ，可以用$("<span/>") 或$("<span></span>") ，但不推薦 $("<span>")。在jQuery 中，這個語法等同于$(document.createElement("span")) 。
上述代碼等同于：
[javascript] view plaincopy
使用變量和直接使用$("<></>") 是不一樣的。最后放一段代碼作為總結：
[javascript] view plaincopy
總結
以上是生活随笔為你收集整理的jQuery HTML 添加和删除元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery - 获取并设置 CSS 类
- 下一篇： jQuery 遍历