jQuery添加插入元素--before、after、append、prepend

cikenerd 發(fā)布于2019-08-26 11:58 / 996人閱讀

摘要：前言最近這個項目，由于某些原因，用的框架是年邁的。項目中免不了需要添加的操作，自己也老是搞混添加的方法，雖然簡單，但是偶爾還是要去看文檔用法，覺得文字記憶有點不模糊，于是覺得結(jié)合圖片來總結(jié)一下。

前言

最近這個項目，由于某些原因，用的js框架是年邁的jQuery。項目中免不了需要添加DOM的操作，自己也老是搞混JQ添加DOM的方法，雖然簡單，但是偶爾還是要去看文檔用法，覺得文字記憶有點不模糊，于是覺得結(jié)合圖片來總結(jié)一下。

jQuery添加元素的方法 1.before() - 在被選元素之前插入內(nèi)容 2.after() - 在被選元素之后插入內(nèi)容 3.prepend() - 在被選元素的開頭插入內(nèi)容 4.append() - 在被選元素的結(jié)尾插入內(nèi)容 添加元素方法圖示

demo





  
  
  JQ插入元素




  JQ插入元素---before、after、append、prepend
  
    
      我是內(nèi)容一

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107922.html

相關(guān)文章

jQuery DOM節(jié)點的創(chuàng)建、插入、刪除

摘要：通過方法添加的元素剛好相反，內(nèi)容在方法前面，無論是一個選擇器表達(dá)式或創(chuàng)建作為標(biāo)記上的標(biāo)記它都將被插入到目標(biāo)容器的末尾。主要的不同是語法特別是插入內(nèi)容和目標(biāo)的位置。 DOM節(jié)點的創(chuàng)建 DOM創(chuàng)建節(jié)點及節(jié)點屬性首先，介紹如何使用JavaScript創(chuàng)建div節(jié)點元素，主要包括創(chuàng)建div節(jié)點元素的屬性和創(chuàng)建div節(jié)點元素的樣式兩大部分內(nèi)容創(chuàng)建流程：創(chuàng)建節(jié)點(常見的：元素、屬性和文本)...

rainyang 2019-08-21 11:54 評論0 收藏0
JQuery干貨篇之插入元素

摘要：在匹配元素集合中的每個元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點。當(dāng)需要移走一個元素，不久又將該元素插入時，這種方法很有用。實例從中移除集合中匹配元素的所有子節(jié)點。 JQuery干貨篇之插入元素本次使用的html,css還是我上一篇的源代碼，詳情請看上一篇文章分類插入子元素：append,prepend ,appendTo,prependTo 封裝包裹元素：wrap,wrap...

jemygraw 2019-08-29 12:27 評論0 收藏0
JQuery干貨篇之插入元素

摘要：在匹配元素集合中的每個元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點。當(dāng)需要移走一個元素，不久又將該元素插入時，這種方法很有用。實例從中移除集合中匹配元素的所有子節(jié)點。 JQuery干貨篇之插入元素本次使用的html,css還是我上一篇的源代碼，詳情請看上一篇文章分類插入子元素：append,prepend ,appendTo,prependTo 封裝包裹元素：wrap,wrap...

songze 2019-08-20 15:58 評論0 收藏0
看Zepto如何實現(xiàn)增刪改查DOM

摘要：先看下圖，我們以刪除元素，插入元素復(fù)制元素，包裹元素和替換元素幾個模塊分別探究如何一一將其實現(xiàn)。遍歷當(dāng)前集合中的元素，當(dāng)該元素的父節(jié)點存在的時候，使用刪除該元素。接下來我們來看如何將中創(chuàng)建好的節(jié)點插入到目標(biāo)位置。前言 dom也就是文檔對象模型，是針對HTML和XML的一個api，描繪了一個層次化的節(jié)點樹。雖然瀏覽器原生給我們提供了許多操作dom的方法，使我們可以對dom進(jìn)行查找，復(fù)制...

lookSomeone 2019-08-01 17:45 評論0 收藏0