當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

jquery实现动态添加html代码

發布時間：2023/12/15 综合教程 21 生活家

生活随笔收集整理的這篇文章主要介紹了 jquery实现动态添加html代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先看下思導圖，整體了解下，然后我們再來學習。

現在我們來看一下幾段代碼，然后根據這幾段代碼我們來學習一下如何正確的學習動態添加html。

一.html()方法

html函數的作用原理首先是移除目標元素內部的html代碼，然后將新代碼添加到目標元素。
第一段代碼：

function CommentBubble()
{
	var w1 = '<div class="list">' +
	'<table class="out" border="0" cellspacing="0" cellpadding="0"> ' +
	'<tr>' +
	'<td class="icontd" align="right" valign="bottom">' +
	'<img src="http://files.cnblogs.com/files/wangqiguo/touxiang2.gif" width="70px" height="60px"/>' +
	'</td>' +
	'<td align="left" valign="bottom" class="q">' +
	'<table border="0" cellpadding="0" cellspacing="0" style=""> ' +
	'<tr><td class="topleft"></td><td class="top"></td><td class="topright"></td></tr> ' +
	'<tr><td class="left"></td> <td align="left" class="conmts"><p>';
	var w2 = '</p> </td> <td class="right"></td></tr> ' +
	'<tr><td class="bottomleft"></td><td class="bottom"></td><td class="bottomright"></td></tr> ' +
	'</table>' +
	'</td> ' +
	'</tr> ' +
	'</table> ' +
	'</div>';
	$.each($(".blog_comment_body"), function(i, t) {
	$(t).html(w1 + $(t).html() + w2);
	});
 
$(".louzhu").closest(".feedbackItem").find(".out").removeClass("out").addClass("inc"); 

}

使用前

使用后：

知識點
這段代碼實際上使用了html()方法來動態添加代碼
關鍵點在

$.each($(".blog_comment_body"), function(i, t) {
	$(t).html(w1 + $(t).html() + w2);
	});

相關知識點：
1. each()是遍歷方法, 簡單的說each就是個循環語句。
看一下例子：

// each處理一維數組
  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });
  // 處理json數據，例如ajax的返回值     
  var obj = { one:1, two:2, three:3};      
　$.each(obj, function(key, val) {      
      alert(key); 
      alert(val); 
  });

function (i, value)中i 是當前元素的位置，value是值。
例子：

$.each([2,3,4],function(index,value){alert('第'+ index+ '數是'+value);});

2.html() 方法
語法：
$(selector).html(content)
例子：
$("p").html("W3School");
3.closest()方法
closest() 方法獲得匹配選擇器的第一個祖先元素，從當前元素開始沿 DOM 樹向上。返回包含零個或一個元素的 jQuery 對象
代碼

$(".louzhu").closest(".feedbackItem").find(".out").removeClass("out").addClass("inc");

解釋：用closest找到class=" louzhu "的祖輩元素中符合是feedbackItem的標簽的元素，發現.out，然后移除這個類，加上類inc

仔細看一下，發現樓主層的樣式與普通樓的不一樣，氣泡顏色不一樣，樓主層有圖片頭像，普通層沒有
仔細查一下，發現，普通層
.list .out .icontd {
display: none
}
這樣圖片就不會出現.

如果還是不懂的話，可以參考這篇文章jQuery筆記：jQuery篩選器找父親parent,closest,parents,parentUntil

二.prepend()方法-內部插入

prepend()函數用于向每個匹配元素內部的起始位置追加指定的內容。
語法：
.prepend(String/Element/jQuery)
指定的內容可以是：html字符串、DOM元素(或數組)、jQuery對象、函數(返回值)。

第二段代碼：

window.onload = function () {
$('#div_digg').prepend('<div style="padding-bottom: 5px"><span class="icon_favorite" style="padding-top: 2px"></span><a onclick="follow();return false;" href="javascript:void(0);" style="font-weight: bold; padding-left:5px;">關注一下樓主吧</a> </div>'); 
}

說明：
這主要用來了.prepend()方法

可以看到，代碼被插入到被選元素的開頭位置(位于內部）。
用畫圖來表示下
例子1：（html字符串）
代碼：

<div id="header"> 
</div>
<div id="middle">
</div>
<div id="footer">
</div>
<script>
$("#middle").prepend("<div>你好</div>");
</script>

例子2：（DOM Element ）
用畫圖來表示下
代碼：

<div id="header"> 
</div>
<div id="middle">
</div>
<div id="footer">
</div>
<script>
$("#middle").prepend( document.createTextNode("你好"));
</script>

例子3：（jquery對象）
初始

加入代碼：
$("#header").prepend($("#middle"));

具體解釋可以看下面的拓展2的講解。
例子4：（函數）
使用匿名函數向指定元素內部的前面插入節點
語法:
$(selector).prepend(function(index,html))
第一個參數就是當前元素在匹配元素中的索引，第二個參數就是該元素當前的內部html內容(innerHTML)。函數的返回值就是需要為該元素追加的內容(可以是html字符串、DOM元素、jQuery對象)。
注意：只有第一個參數可以為自定義函數，用于遍歷執行。如果之后的參數也為函數，則調用其toString()方法，將其轉為字符串，并視為html內容。
舉例1：

<div id="header" class="add"> 
header</div>
<div id="middle" class="add">
middle</div>
<div id="footer" class="add">
footer</div>
<button>結尾添加內容</button>
<script>
 $(document).ready(function(){
  $("button").click(function(){
    $(".add").prepend(function(n){
      return "<b>你好 " + n + "</b>";
     });
   });
 }); 
</script>

舉例2:

<div id="header" class="add"> 
header</div>
<div id="middle" class="add">
middle</div>
<div id="footer" class="add">
footer</div>
<script>
  // 定義一個數組  
    var books = [  
        {name: "Java" , price:109},  
        {name: "Java EE" , price:89},  
        {name: "Android" , price:89}]  
    // 使用函數為不同div元素動態添加不同的內容  
    $(".add").prepend(function(i)  
    {  
        // i代表jQuery對象中正在迭代處理的元素的索引，因此為0、1、2...  
        return "<b>書名是《" + books[i].name  
            + "》,價格是:" + books[i].price;  
    })  
</script>

拓展：
1. DOM對象與jQuery對象
（1）什么是jQuery對象？---就是通過jQuery包裝DOM對象后產生的對象。
（2）jQuery對象轉成DOM對象： **
由于jQuery對象本身是一個集合。所以如果jQuery對象要轉換為Dom對象則必須取出其中的某一項，一般可通過索引取出。
1)jQuery對象是一個數據對象，可以通過[index]的方法，來得到相應的DOM對象。
如： $("#middle")[0]，$("div").eq(1)[0]，$("p")[2]
2)jQuery本身提供，通過.get(index)方法，得到相應的DOM對象
如：$("div").get()[6]
（3）DOM對象轉成jQuery對象: **
對于已經是一個DOM對象，只需要用(()把DOM對象包裝起來，就可以獲得一個jQuery對象了。)(DOM對象)
如：$(document.getElementById("middle"))
返回的就是jQuery對象，可以使用jQuery的方法。
2.對原有的DOM元素進行移動（若對已在文檔中存在的元素使用插入節點的方法則相當于執行“移動節點”的操作
注意：如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作,而不是復制操作。
**重要:
（1）如果有多個目標元素，內容將被復制然后插入到每個目標里面。
（2）追加的內容是當前頁面中的某些元素，且有多個目標元素，那么這些元素內容將被復制然后插入到每個目標里面,原位置內容上消失。
**
例子1：
初始

加入代碼：
$("#header").prepend($("#middle"));

例子2：
初始

加入代碼
$("#header").prepend($("#middle"), $("#footer"));

3.與prepend()方法創建html代碼，追加DOM Element ，有關的DOM方法
（1）創建節點
創建流程比較簡單，大體如下：
1）. 創建節點(常見的：元素、屬性和文本)
2）. 添加節點的一些屬性
3）. 加入到文檔中
流程中涉及的一點方法：
創建元素：document.createElement
設置屬性：setAttribute
添加文本：innerHTML createTextNode()
加入文檔：appendChild
看個例子：

<div class="header"></div>
<div class="middle"></div>
<div class="footer"></div>
<script>
	var d=document.createElement("div");//createElement：創建一個HTML標記
	var t=document.createTextNode("你好");//添加內容 createTextNode
	d.appendChild(t);//把你好添加到div標記中   appendChild:添加子標記
	document.body.appendChild(d); //默認添加在文檔的最后。
</script>

例子2：

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
	var d=document.createElement("div");//createElement：創建一個HTML標記
	var t=document.createTextNode("你好");//添加內容 createTextNode
	d.appendChild(t);//把你好添加到div標記中   appendChild:添加子標記
	document.getElementById("middle").appendChild(d); //把div標記添加到id是middle的標簽中  
</script>

（2）document.createElement()
createElement() 方法可創建元素節點。
document.createElement()是在對象中創建一個對象，要與appendChild() 或 insertBefore()方法聯合使用。

<div id="header"></div>
<div id="middle">你好</div>
<div id="footer"></div>
<script>
    var a  = document.createElement("p");
    document.getElementById("middle").appendChild(a); 
</script>

（3）document.createTextNode()
注意：createTextNode只是純粹創造了文本節點，所以返回的效果也就是純文本內容。

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
    var t=document.createTextNode("你好");//添加內容 createTextNode
    document.getElementById("middle").appendChild(t); 
</script>

（4）element.appendChild()
添加一個節點到指定的節點的子節點數組中，讀起來好象有點拗口，簡單地說就是將元素添加到指定的節點中
appendChild用法:
target.appendChild(newChild)
newChild作為target的子節點插入最后的一子節點之后

var d=document.createElement("div");//createElement：創建一個HTML標記
	var t=document.createTextNode("你好");//添加內容 createTextNode
	d.appendChild(t);//把你好添加到div標記中   appendChild:添加子標記

（5）element.insertBefore()
insertBefore() 方法在您指定的已有子節點之前插入新的子節點。
insertBefore調用方法
parentElement.insertBefore(newElement,targetElement)
DOM提供了insertBefore()方法，要使用他需要做三件事：
1）新元素：需要插入的元素（newElement）
2）目標元素：在那個元素前插入（targetElement）
3）父元素：目標元素的父元素（parentElement）
例子：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
var a =document.createElement("span");
var b =document.createTextNode("你好");
a.appendChild(b);
var c = document.getElementById("middle");
c.parentNode.insertBefore(a,c);
/*
parentElement.insertBefore( newElement  ,  targetElement );
從上面語法可以看出， 父元素， 新元素，目標元素 是 insertBefore使用的3要素。
其實我們可以不管  父元素， 因為 父元素我們 可以用 目標元素.parentNode 得到。
那么insertBefore就很好用了。只要給2個參數 ： 新元素 和目標元素。
*/
</script>

（6）在元素后面插入一個新元素（DOM沒有提供方法：并沒有.insertAfter()）

三.prepend()方法2-內部插入

第三段代碼

{
    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章節標題不是h4,只需要將這里的h4換掉即可
    if(jquery_h3_list.length>0)//如果你的章節標題h3存在,追加代碼創建目錄。
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>閱讀目錄</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();

我們來繼續分析下

var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>閱讀目錄</b></p>';
        content    += '<ul>';
        content    += '</ul>';
        content    += '</div>';

這段主要對應的是

而下面這段代碼主要是生成li的代碼:

for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }

設置好html后，最后用.prepend(content);追加在文章的頭部。

四.prependTo()方法-內部插入

prependTo() 方法向每個匹配元素內部的起始位置追加指定的內容。
實際上，使用這個方法是顛倒了常規的$(A).prepend(B)的操作，即不是把B追加到A中，而是把A追加到B中。
語法：
$(content).prependTo(selector)
Selector : Selector, Element, jQuery
一個選擇符，元素，HTML字符串，DOM元素數組，或者jQuery對象；符合的元素們會被插入到由參數指定的目標的末尾。
例子1代碼：

var $backToTopTxt = "返回頂部", $backToTopEle = $('<div class="backToTop"></div>').prependTo ($("body")).text($backToTopTxt).attr("title", $backToTopTxt)

解釋
創建代碼如下，位置位于被選元素body的起始位置.

用畫圖的方法表示：
例子1：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer" ></div>
<script>
$("<div>你好</div>").prependTo("#middle");
</script>

這種寫法：也是可以實現效果的：
$("<div>你好</div>").prependTo($("#middle"));
注意：下面這種寫法是錯誤的

例2：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$(document.createTextNode("你好")).prependTo("#middle");
</script>

這種寫法：也是可以實現效果的：
$( document.createTextNode("你好")).prependTo($("#middle"));
例3：（選擇頁面上原有的一個元素插入到另一位置）
(1)如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作,而不是復制操作。

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"><span>你好</span></div>
<script>
$("span").prependTo($("#middle "));
</script>

實驗了下也可以實現效果：
$("span").prependTo("#middle");
（2）追加的內容是當前頁面中的某些元素，且有多個目標元素，那么這些元素內容將被復制然后插入到每個目標里面,原位置內容上消失。

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$("p").prependTo($(".add"));
</script>

實驗了下也可以實現效果：
$("p").prependTo(".add");

五.append ()方法-內部插入

語法：
.append(String/Element/jQuery)
指定的內容可以是：html字符串、DOM元素(或數組)、jQuery對象、函數(返回值)。
注意：插入每個匹配元素里面的末尾（在內部）
例：
$('body').append('<a href="#" id="toTop" style="bottom: 77px; "></a>');

例子1：( html字符串)
用畫圖的方法表示
代碼：

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
$("#middle").append("<div>你好</div>");`
</script>

例子2：(DOM元素)
用畫圖的方法表示
代碼：

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"></div>
<script>
$("#middle").append(document.createTextNode("你好"));
</script>

例子3：(jQuery對象)
(1)如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作,而不是復制操作。
代碼：

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"><span>你好</span></div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$("#middle").append($("span"));
</script>

（2）追加的內容是當前頁面中的某些元素，且有多個目標元素，那么這些元素內容將被復制然后插入到每個目標里面,原位置內容上消失。
用畫圖的方法表示
代碼：

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$(".add").append($("p"));
</script>

例四：（函數）
語法
$(selector).append (function(index,html))
第一個參數就是當前元素在匹配元素中的索引，第二個參數就是該元素當前的內部html內容(innerHTML)。函數的返回值就是需要為該元素追加的內容(可以是html字符串、DOM元素、jQuery對象)。
注意：只有第一個參數可以為自定義函數，用于遍歷執行。如果之后的參數也為函數，則調用其toString()方法，將其轉為字符串，并視為html內容。
舉例1：

<div id="header" class="add"> 
header</div>
<div id="middle" class="add">
middle</div>
<div id="footer" class="add">
footer</div>
<button>結尾添加內容</button>
<script>
 $(document).ready(function(){
  $("button").click(function(){
    $(".add").append(function(n){
      return "<b>你好 " + n + "</b>";
     });
   });
 }); 
</script>

舉例2：

<div id="header" class="add"> 
1.</div>
<div id="middle" class="add">
2.</div>
<div id="footer" class="add">
3.</div>
<script>
 // 定義一個數組  
    var books = [  
        {name: "Java" , price:109},  
        {name: "Java EE" , price:89},  
        {name: "Android" , price:89}]  
    // 使用函數為不同div元素動態添加不同的內容  
    $(".add").append(function(i)  
    {  
        // i代表jQuery對象中正在迭代處理的元素的索引，因此為0、1、2...  
        return "<b>書名是《" + books[i].name  
            + "》,價格是:" + books[i].price;  
    })  
</script>

六.appendTo方法-內部插入

appendTo() 方法在被選元素的結尾（仍然在內部）插入指定內容。
實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
語法：
$(content).appendTo(selector)
Selector : Selector, Element, jQuery
一個選擇符，元素，HTML字符串，DOM元素數組，或者jQuery對象；符合的元素們會被插入到由參數指定的目標的末尾。

例子1代碼：

var $backToTopTxt = "返回頂部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt).attr("title", $backToTopTxt)

解釋
創建代碼如下，位置位于被選元素body的結尾部分.

例子2代碼：

function CreateDom() {
   var select = $("<select/>").appendTo($("body"));
   var option1 = $("<option value="1">text1</option>").appendTo(select);
   var option2 = $("<option value="2">text2</option>").appendTo(select);
   var option3 = $("<option value="3">text3</option>").appendTo(select);
   var text = $("<input type="text">").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo($("body"));
   var checkbox = $("<input type="checkbox" />").appendTo($("body"));
   var ul = $("< ul/>").appendTo($("body"));
   var li = $("<li>li1</li>").appendTo(ul);
   var li = $("<li>li2</li>").appendTo(ul);
}

用畫圖的方法表示：
例子1：
代碼：

<div id="header"></div>
<div id="middle"></div>
<div id="footer" ></div>
<script>
$("<div>你好</div>").appendTo("#middle");
</script>

**
這種寫法：也是可以實現效果的：**
$("<div>你好</div>").appendTo($("#middle"));
注意：下面這種寫法是錯誤的

例2：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$(document.createTextNode("你好")).appendTo("#middle");
</script>

這種寫法：也是可以實現效果的：
$( document.createTextNode("你好")).appendTo($("#middle"));
例3：（選擇頁面上原有的一個元素插入到另一位置）
(1)如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作,而不是復制操作。

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"><span>你好</span></div>
<script>
$("span").appendTo($("#middle"));
</script>

實驗了下也可以實現效果：
$("span").appendTo("#middle");
（2）追加的內容是當前頁面中的某些元素，且有多個目標元素，那么這些元素內容將被復制然后插入到每個目標里面,原位置內容上消失。

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$("p").appendTo($(".add"));
</script>

實驗了下也可以實現效果：
$("p").appendTo(".add");
拓展：

1.之前在問題問了下代碼中：
var select = $("<select/>").appendTo($("body"));
為什么寫的是<select/>，但是js在頁面的body里還是生成了
<select></select>，不是很明白?
其實這是因為JQuery會自動的完善html代碼，也就是說，假如你要執行以下操作
$('content').append('<p>CSDN');
那么實際插入到標記中的html代碼是
<p>CSDN</p>
另外
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html> ，通常是成對出現的，比如 <b> 和 </b>。這些成對出現的HTML 標簽，第一個標簽是開始標簽，第二個標簽是結束標簽。
而那些沒有關閉標簽的空元素如<br />在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法。
而這里的<select>并不是自閉合標簽，它的完整的寫法實際上應該是<select></select>,而<select/>這種寫法實際上html標簽并沒有閉合，相當于只寫了開始標簽<select>，JQuery會自動的完善html代碼，所以追加的代碼是完整的<select></select>。但是要記得如果是只寫了閉合標簽，開始標簽沒有寫的話，JQuery是不會完善html代碼的，如這樣的
$("</select>").appendTo($("body"));
結果頁面上并沒有被插入代碼。
2.appendTo方法與append方法區別
appendTo() 方法與appendT方法都是在被選元素的結尾（仍然在內部）插入指定內容。
不同的是:
append方法常規的((A).append(B)的操作是把B追加到A中，
而appendTo方法)(A).append(B)的操作，是把A追加到B中。
即：
append()前面是要選擇的對象，后面是要在對象內插入的元素內容，效率要高點， appendTo()前面是要插入的元素內容，而后面是要選擇的對象
具體的我就不多講了，還不明白的話可以參考文章jQuery的append和appendTo

七.before()方法和insertBefore()方法-外部插入

before()方法來動態添加代碼
向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然后將html代碼插入。
語法：
.before(String/Element/jQuery)
指定的內容可以是：html字符串、DOM元素(或數組)、jQuery對象、函數(返回值)
還是上一個代碼
在生成li的代碼中，其中有這么幾句

var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);

可以看出追加的代碼在jquery_h3_list[i]元素代碼的前面，與他是兄弟關系。
例子1：（html字符串）
用畫圖的方法表示
代碼：

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
$('#middle').before('<div>你好</div>');
</script>

例子2：（DOM元素）
用畫圖來表示下
代碼：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$('#middle').before(document.createTextNode("你好"));
</script>

例子3：（jQuery對象）
注意：
(1)如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作,而不是復制操作。
代碼：
用畫圖的方法表示
代碼：

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"></div>
<script>
$("#footer").before($("p"));
</script>

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$(".add").before($("p"));
</script>

例四：（函數）
語法：
$(selector). before (function(index))
使用function(index)函數迭代處理jQuery所包含的每個節點，在每個節點的前面依次添加function(index)函數的返回值。index - 可選。接收選擇器的 index 位置。
舉例：

<div id="header" class="add"> 
header</div>
<div id="middle" class="add">
middle</div>
<div id="footer" class="add">
footer</div>
<script>
  // 定義一個數組  
    var books = [  
        {name: "Java" , price:109},  
        {name: "Java EE" , price:89},  
        {name: "Android" , price:89}]  
    // 使用函數為不同div元素動態添加不同的內容  
    $(".add").before(function(i)  
    {  
        // i代表jQuery對象中正在迭代處理的元素的索引，因此為0、1、2...  
        return "<b>書名是《" + books[i].name  
            + "》,價格是:" + books[i].price;  
    })  
</script>

insertBefore()方法來動態添加代碼
將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然后將JQuery對象插入；
語法：
.insertBefore(target)
target
類型: Selector, Element, jQuery
一個選擇器，元素，HTML字符串或者jQuery對象，匹配的元素將會被插入在由參數指定的目標后面。
用畫圖的方法表示
例子1：
代碼：

<div id="header"></div>
<div id="middle"></div>
<div id="footer" ></div>
<script>
$("<div>你好</div>").insertBefore("#middle ");

這種寫法也是可以實現效果的：
$("<div>你好</div>").insertBefore($("#middle "));

注意：下面這種寫法是錯誤的

例2：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$(document.createTextNode("你好")).insertBefore ("#middle ");
</script>

這種寫法：也是可以實現效果的：
$(document.createTextNode("你好")). insertBefore($("#middle "));
例3：（選擇頁面上原有的一個元素插入到另一位置）
(1)如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作,而不是復制操作。

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"><span>你好</span></div>
<script>
$("span").insertBefore($("#middle")); 
</script>

實驗了下也可以實現效果：
$("span"). insertBefore("#middle ");

（2）追加的內容是當前頁面中的某些元素，且有多個目標元素，那么這些元素內容將被復制然后插入到每個目標里面,原位置內容上消失。

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$("p").insertBefore($(".add")); 
</script>

實驗了下也可以實現效果：
$("p").insertBefore(".add");

八.after方法和insertAfter()方法-外部插入

after方法：向元素的后邊添加html代碼，如果元素后面有元素了，那將后面的元素后移，然后將html代碼插入。
語法：
.after(String/Element/jQuery)
指定的內容可以是：html字符串、DOM元素(或數組)、jQuery對象、函數(返回值)。
例子1：（html字符串）

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
$("#middle").after("<div>你好 </div>");
</script>

例子2：（DOM元素）

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"></div>
<script>
$("#middle").after(document.createTextNode("你好")); 
</script>

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"><span>你好</span></div>
<script>
$("#middle").after($("span"));
</script>

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$(".add").after($("p"));
</script>

例子4：(函數)
語法：
$(selector).after(function(index))
使用function(index)函數迭代處理jQuery所包含的每個節點，在每個節點的后面依次添加function(index)函數的返回值。index - 可選。接收選擇器的 index 位置。
舉例1：

<div id="header"></div>
<div id="middle"><span class="add">hello</span></div>
<div id="footer" class="add"></div>
<script>
$(".add").after( function(index, innerHTML){
    return '<strong>你好' + (index + 1) + '</strong>';
} );

舉例2：

<div id="header" class="add"> 
header</div>
<div id="middle" class="add">
middle</div>
<div id="footer" class="add">
footer</div>
<script>
  // 定義一個數組  
    var books = [  
        {name: "Java" , price:109},  
        {name: "Java EE" , price:89},  
        {name: "Android" , price:89}]  
    // 使用函數為不同div元素動態添加不同的內容  
    $(".add").after(function(i)  
    {  
        // i代表jQuery對象中正在迭代處理的元素的索引，因此為0、1、2...  
        return "<b>書名是《" + books[i].name  
            + "》,價格是:" + books[i].price;  
    })  
</script>

insertAfter()方法：將JQuery封裝好的元素插入到指定元素的后面，如果元素后面有元素了，那將后面的元素后移，然后將JQuery對象插入
語法：
.insertAfter (target)
target
類型: Selector, Element, jQuery
一個選擇器，元素，HTML字符串或者jQuery對象，匹配的元素將會被插入在由參數指定的目標后面。
用畫圖的方法表示
例子1：
代碼：

<div id="header"></div>
<div id="middle"></div>
<div id="footer" ></div>
<script>
$("<div>你好</div>").insertAfter("#middle ");
</script>

這種寫法：也是可以實現效果的：
$("<div>你好</div>").insertAfter($("#middle "));

注意：下面這種寫法是錯誤的

例2：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$(document.createTextNode("你好")).insertAfter ("#middle ");
</script>

這種寫法也是可以實現效果的：
$(document.createTextNode("你好")).insertAfter($("#middle "));
例3：（選擇頁面上原有的一個元素插入到另一位置）
(1)如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這是一個移動操作,而不是復制操作。

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"><span>你好</span></div>
<script>
$("span").insertAfter($("#middle")); 
</script>

實驗了下也可以實現效果：
$("span").insertAfter("#middle ");
（2）追加的內容是當前頁面中的某些元素，且有多個目標元素，那么這些元素內容將被復制然后插入到每個目標里面,原位置內容上消失。

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$("p").insertAfter($(".add")); 
</script>

實驗了下也可以實現效果：
$("p").insertAfter(".add");

注意：本文為原創，轉載請以鏈接形式標明本文地址，謝謝合作。
本文地址：http://www.cnblogs.com/wanghuih/p/5755932.html

總結

以上是生活随笔為你收集整理的jquery实现动态添加html代码的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：关于车机互联方式的一点想法
下一篇：英特尔拟削减管理者薪酬以降成本，CEO带