2. 程式人生 > >jQuery 建立和插入元素

jQuery 建立和插入元素

阿新 • • 發佈：2018-11-12

原文連結

 

 

一、使用jQuery建立元素

1、建立元素

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. $(function(){  
  2. var $h1=$(“<h1></h1>”);  
  3. $(“body”).append($h1);  
  4. })  

2、建立文字

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. $(
    function(){  
  2. var $h1=$(“<h1>DOM文件物件模型</h1>”);  
  3. $(“body”).append($h1);  
  4. })  

3、建立屬性

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. $(function(){  
  2. var $h1=$(“<h1 title=“一級標題”  class=“red”>DOM文件物件模型</h1>”);  
  3. $(“body”).append($h1);  
  4. })  

 

二、使用jQuery插入元素

 

1、在節點內部插入內容

 

（1）、append()方法在被選元素的結尾（仍然在內部）插入指定內容

   提示：append() 和 appendTo() 方法執行的任務相同。不同之處在於：內容的位置和選擇器。

        語法：$(selector).append(content)

   content必需。規定要插入的內容（可包含 HTML 標籤）。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").append(" <b>Hello world!</b>");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button>在每個 p 元素的結尾新增內容</button>  
  16. </body>  
  17. </html>  

 

 

  使用函式來附加內容，使用函式在指定元素的結尾插入內容。

 

 

        語法：$(selector).append(function(index,html))

  function(index,html) 必需。規定返回待插入內容的函式。

  index - 可選。接收選擇器的 index 位置。

  html - 可選。接收選擇器的當前 HTML。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").append(function(n){  
  8.       return "<b>This p element has index " + n + "</b>";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>This is a heading</h1>  
  16. <p>This is a paragraph.</p>  
  17. <p>This is another paragraph.</p>  
  18. <button>在每個 p 元素的結尾新增內容</button>  
  19. </body>  
  20. </html>  


 

 

 

（2）、appendTo()方法在被選元素的結尾（仍然在內部）插入指定內容

  提示：append() 和 appendTo() 方法執行的任務相同。不同之處在於：內容和選擇器的位置，以及 append() 能夠使用函式來附加內容。

       語法：$(content).appendTo(selector)

  content必需。規定要插入的內容（可包含 HTML 標籤）。

  selector必需。規定把內容追加到哪個元素上。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("<b> Hello World!</b>").appendTo("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button>在每個 p 元素的結尾新增內容</button>  
  16. </body>  
  17. </html>  

 

 

（3）、prepend() 方法在被選元素的開頭（仍位於內部）插入指定內容

 

  提示：prepend() 和 prependTo() 方法作用相同。差異在於語法：內容和選擇器的位置，以及 prependTo() 無法使用函式來插入內容。

        語法：$(selector).prepend(content)

  content必需。規定要插入的內容（可包含 HTML 標籤）。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").prepend("<b>Hello world!</b> ");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button>在每個 p 元素的開頭插入內容</button>  
  16. </body>  
  17. </html>  


 

  使用函式來附加內容，使用函式在被選元素的開頭插入指定的內容。

 

        語法：$(selector).prepend(function(index,html))

  function(index,html) 必需。規定返回待插入內容的函式。

  index - 可選。接受選擇器的 index 位置。

  html - 可選。接受選擇器的當前 HTML。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").prepend(function(n){  
  8.       return "<b>這個 p 元素的 index 是：" + n + "</b> ";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>這是一個標題</h1>  
  16. <p>這是一個段落。</p>  
  17. <p>這是另一個段落。</p>  
  18. <button>在每個 p 元素的開頭插入內容</button>  
  19. </body>  
  20. </html>  

 

 

 

 

 

（4）、prependTo() 方法在被選元素的開頭（仍位於內部）插入指定內容

  提示：prepend() 和 prependTo() 方法作用相同。差異在於語法：內容和選擇器的位置，以及 prepend() 能夠使用函式來插入內容。

         語法：$(content).prependTo(selector)

  content 必需。規定要插入的內容（可包含 HTML 標籤）。

  selector 必需。規定在何處插入內容。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $(".btn1").click(function(){  
  7.     $("<b>Hello World!</b>").prependTo("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <p>This is another paragraph.</p>  
  15. <button class="btn1">在每個 p 元素的開頭插入文字</button>  
  16. </body>  
  17. </html>  


 

 

 

2、在節點外部插入內容

（1）、after() 方法在被選元素後插入指定的內容

       語法：$(selector).after(content)

   content必需。規定要插入的內容（可包含 HTML 標籤）。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").after("<p>Hello world!</p>");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <button>在每個 p 元素後插入內容</button>  
  15. </body>  
  16. </html>  


 

 

 

  使用函式來插入內容，使用函式在被選元素之後插入指定的內容。

        語法：$(selector).after(function(index))

  function(index) 必需。規定返回待插入內容的函式。

  index - 可選。接收選擇器的 index 位置。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").after(function(n){  
  8.       return "<p>The p element above has index " + n + "</p>";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>This is a heading</h1>  
  16. <p>This is a paragraph.</p>  
  17. <p>This is another paragraph.</p>  
  18. <button>在每個 p 元素後插入內容</button>  
  19. </body>  
  20. </html>  


 

 

 

（2）、before() 方法在被選元素前插入指定的內容

        語法：$(selector).before(content)

    content 必需。規定要插入的內容（可包含 HTML 標籤）。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $(".btn1").click(function(){  
  7.     $("p").before("<p>Hello world!</p>");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>This is a paragraph.</p>  
  14. <button class="btn1">在每個段落前面插入新的段落</button>  
  15. </body>  
  16. </html>  


 

  使用函式來插入內容，使用函式在指定的元素前面插入內容。

 

     語法：$(selector).before(function(index))

  function(index)必需。規定返回待插入內容的函式。

  index - 可選。接收選擇器的 index 位置。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("p").before(function(n){  
  8.       return "<p>The p element below has index " + n + "</p>";  
  9.     });  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <h1>This is a heading</h1>  
  16. <p>This is a paragraph.</p>  
  17. <p>This is another paragraph.</p>  
  18. <button class="btn1">在每個段落前面插入新的段落</button>  
  19. </body>  
  20. </html>  


 

 

 

（3）、insertAfter()把匹配的元素插入到另一個指定的元素集合的後面

  註釋：如果該方法用於已有元素，這些元素會被從當前位置移走，然後被新增到被選元素之後。

       語法：$(content).insertAfter(selector)

  content必需。規定要插入的內容。可能的值：選擇器表示式、HTML 標記

  selector必需。規定在何處插入被選元素。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("<span>你好！</span>").insertAfter("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>這是一個段落。</p>  
  14. <p>這是另一個段落。</p>  
  15. <button>在每個 p 元素之後插入 span 元素</button>  
  16. </body>  
  17. </html>  


 

插入已有的元素

 

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("h1").insertAfter("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <h1>這是一個標題</h1>  
  14. <p>這是一個段落。</p>  
  15. <p>這是另一個段落。</p>  
  16. <button>在每個 p 元素之後插入 h1 元素</button>  
  17. </body>  
  18. </html>  


 

 

 

（4）、insertBefore()把匹配的元素插入到另一個指定的元素集合的前面

   註釋：如果該方法用於已有元素，這些元素會被從當前位置移走，然後被新增到被選元素之前。

        語法：$(content).insertBefore(selector)

   content 必需。規定要插入的內容。可能的值：選擇器表示式、HTML 標記

   selector 必需。規定在何處插入被選元素。

[html] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片

  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. $(document).ready(function(){  
  6.   $("button").click(function(){  
  7.     $("<span>你好！</span>").insertBefore("p");  
  8.   });  
  9. });  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <p>這是一個段落。</p>  
  14. <p>這是另一個段落。</p>  
  15. <button>在每個 p 元素之前插入 span 元素</button>  
  16. </body>  
  17. </html>  


 

 

 

相關推薦

jQuery 建立和插入元素

原文連結     一、使用jQuery建立元素 1、建立元素 [javascript] view plain copy  $(function(){   var $h1=$(“<

通過jquery隱藏和顯示元素

通過jquery隱藏和顯示元素 呼叫jquery本身提供的函式 $("xxx").hide();//隱藏xxx $("xxx").show();//顯示xxx 操作css $("xxx").css({"display":"none"});//隱藏xxx $("xxx").css({"display":

DS二叉排序樹之建立和插入

DS二叉排序樹之建立和插入 時間限制: 1 Sec  記憶體限制: 128 MB 【Java有三倍的時間和記憶體限制】 題目描述 給出一個數據序列，建立二叉排序樹，並實現插入功能 對二叉排序樹進行中序遍歷，可以得到有序的

19. jQuery-設定和獲取元素的內容

1. 效果圖 2. html程式碼 <!DOCTYPE html> <html> <head> <title>jQuery-設定和獲取元素的內容</title> <style type

C++二叉排序樹的建立和插入

加/**/表示另一種二叉排序樹的建立方法 第一類 #include <iostream> using namespace std; class TreeNode { public: int data; TreeNode *Le

在Python中增加和插入元素

在Python中append 用來向 list 的末尾追加單個元素，如果增加的元素是一個list，那麼這個list將作為一個整體進行追加。 例如： Python程式碼 li=['a', 'b']    li.append([2,'d'])    li.append('e'

連結串列的建立和插入

#include <stdio.h> #include <stdlib.h> typedef struct NODE { int data; struct NODE *next; }Node; Node * create_linkli

JS獲取節點的兄弟,父級,子級元素(原生和基於jquery) 、動態建立文件元素 、this和$(this)區別

一、JS獲取節點的兄弟,父級,子級元素的方法 原生js var s= document.getElementById("test"); del_ff(s);    //清理空格 var chils= s.childNodes;  //得到s的全部子節點 var par=s.

JQuery學習筆記（四）——建立、插入和刪除節點

一個小練習： 需求1: 點選 submit 按鈕時,　檢查是否選擇 type, 若沒有選擇給出提示: "請選擇型別";  檢查文字框中是否有輸入(可以去除前後空格), 若沒有輸入,則給出提示: "請輸入內容"; 若檢查都通過, 則在相應的 ul 節點中新增對應的 li 節點

DOM(創建、插入和刪除元素)

http tag img 簽名 har col script value 技術分享 1.創建DOM元素 createElement(標簽名) 創建一個節點 appendChild(節點) 追加一個節點 例子：為ul插入li 並且為li元素插入一些文字

jquery中獲取相鄰元素相關的命令：next()、prev()和siblings()

cnblogs lin Language javascrip prev round blog scrip color jquery裏我們要獲取某個元素的相鄰元素時，可以用到的命令有三個： next():用來獲取下一個同輩元素。 prev():用來獲取上一個同輩元素。 sib

jquery attr和data給元素添加自定義屬性

方式 data 情況 logs .cn strong 目前 es2017 tid 博主不才，將自己總結的寫在這裏，如有問題歡迎一起討論； jquery給一個元素添加自定義屬性目前見過兩種方式 方式一：attr 方式二：data 這兩種放方式都可以給元素添加自定義屬性 如：

JQuery快速入門-操作元素的屬性和樣式

dcl 顯示 實現 節點 ali 文本 屬性。 另一個 增加 我們在學習JavaScript時，詳細介紹了DOM對象。從DOM樹可以得知，對DOM的操作，主要包括：元素的屬性、內容、值、CSS。 一、元素屬性的操作 在 jQuery 中，可以對元素的屬性執行獲取、設置、

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

jQuery添加和刪除元素

插入內容 innerhtml src function tcs number pre color 學習 添加新的 HTML 內容 我們將學習用於添加新內容的四個 jQuery 方法： append() - 在被選元素的結尾插入內容 prepend() - 在被選元

jquery父元素和子元素點選事件傳遞問題_不可把父元素的事件傳遞給子元素_事件無限迴圈傳遞

前述：jquery中： 當一個元素的點選事件被觸發時，會自動將該事件向父級元素逐級專遞。 但是實際場景當中，我們可能會遇到需要在父級元素中定義點選事件，來觸發特定子元素的點選事件，我就遇到了這麼一個問題。  但是這麼做的後果，在jquery1.8.2版本及以後所有版本（截止目前最新版本為3.3），

建立和測試觸發器：向SC表插入資料時，檢查插入資料的課程號是否存在於Course表中（建立之前刪除Cno的外來鍵約束，比較外來鍵約束和觸發器之間的不同）

alter table SC Drop constraint FK_SC--刪除外來鍵約束 CREATE TRIGGER trig_insert ON SC--在SC表中建立trig_insert觸發器 AFTER INSERT--insert為觸發事件，after則為觸發的時機

jQuery on() 方法 為選定已存在元素和未來元素繫結標準事件和自定義事件

很有必要說說jQuery的on方法，這個方法存在大乾坤大奧祕，主要注意兩點： 1、為已存在元素和未來元素（動態新增元素）繫結處理函式。 2、自定義一個非標準的事件並繫結處理函式。 定義和用法 on() 方法在被選元素及子元素上新增一個或多個事件處理程式。 自 jQuery 版本 1.7 起，on()

jquery DOM 建立、插入、刪除 、複製、替換、包裹

1.建立元素節點： $(" ") 2.建立文字節點，與建立元素節點類似，可以直接把文字內容一併描述 $(“ 我是文字節點 ”) 3.建立屬性節點：與建立元素節點同樣的方式 $(“ 我是文字節點 ”) $(“ 動態建立DIV

【資料結構】大小堆的理解，建立，增加和刪除元素操作

什麼是大小堆？ 大小堆是基於完全二叉樹的結構； 大堆：任意一個結點的左右孩子的資料都小於此結點的資料，位於堆頂的結點的資料最大。 小堆：任意一個結點的左右孩子的資料都大於此結點的資料，位於堆頂的結點的資料最小。 下面以小堆為例，圖解： 以下都是以小堆為例 如何