prepend()方法將指定元素插入匹配元素按內部的開頭,其作用和prependTo()方法基本相同,只在語法上有差別,雖然說在語法形式上看基本相同。
下面介紹下語法結構:
參數列表:
demo:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.49028c.com/" /><title>武林網</title><style type="text/css">div{ height:200px; width:200px; border:1px solid green;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("div").prepend("被加添的內容"); })})</script></head><body><div>前面要添加內容:</div><button>點擊查看效果</button></body></html>
prepend()詳解二:
prepend()函數用于向每個匹配元素內部的起始位置追加指定的內容。
指定的內容可以是:html字符串、DOM元素(或數組)、jQuery對象、函數(返回值)。
與該函數相對的是append()函數,用于向每個匹配元素內部的末尾位置追加指定的內容。
該函數屬于jQuery對象(實例)。
語法
參數
jQuery 1.4 新增支持:參數content1可以為函數。prepend()將根據匹配的所有元素遍歷執行該函數,函數中的this將指向對應的DOM元素。
prepend()還會為函數傳入兩個參數:第一個參數就是當前元素在匹配元素中的索引,第二個參數就是該元素當前的內部html內容(innerHTML)。函數的返回值就是需要為該元素追加的內容(可以是html字符串、DOM元素、jQuery對象)。
注意:只有第一個參數可以為自定義函數,用于遍歷執行。如果之后的參數也為函數,則調用其toString()方法,將其轉為字符串,并視為html內容。
返回值
prepend()函數的返回值為jQuery類型,返回當前jQuery對象本身(以便于進行鏈式風格的編程)。
注意:如果追加的內容是當前頁面中的某些元素,那么這些元素將從原位置上消失。簡而言之,這是一個移動操作,而不是復制操作。
示例&說明
prepend()函數用于將每個匹配元素內部的起始位置追加內容:
<p><!--插入到p元素內部的起始位置-->段落文本1<span></span></p><p><!--插入到p元素內部的起始位置-->段落文本2<span></span></p><script type="text/javascript">$("p").prepend( '<!--插入到p元素內部的起始位置-->' ); </script>
請注意prepend()函數和prependTo()函數的區別:
var $A = $("s1");var $B = $("s2");// 將$B追加到$A中$A.prepend( $B ); // 返回$A// 將$A追加到$B中$A.prependTo( $B ); // 返回表示追加內容的jQuery對象( 匹配所有$B內部開頭追加的$A元素 )
以下面這段HTML代碼為例:
<p id="n1"> <span id="n2">CodePlayer</span> </p><p id="n3"> <label class="move">Hello World</label></p><p id="n4"> <i>測試內容</i></p>
以下jQuery示例代碼用于演示prepend()函數的具體用法:
var $n1 = $("#n1");//將一個strong標記追加到n1內部的起始位置$n1.prepend( '<strong>追加內容</strong>' );//將所有的label元素和i元素追加到n1內部的起始位置//原來位置的label元素和i元素會消失(相當于是移動到n1內部的起始位置)$n1.prepend( document.getElementsByTagName("label"), $("i") );//為每個p元素內部的起始位置追加一個span元素,html內容根據索引而有所不同var $p = $("p");$p.prepend( function(index, html){ return '<span>追加元素' + (index + 1) + '</span>'; } );
運行代碼
prepend()會將內容追加到指定容器元素的開始標記之后,不會額外添加任何空白字符,上述代碼執行后的完整html代碼如下(格式未作任何調整):
<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>測試內容</i><strong>追加內容</strong> <span id="n2">CodePlayer</span> </p><p id="n3"><span>追加元素2</span> </p><p id="n4"><span>追加元素3</span> </p>
新聞熱點
疑難解答