動態創建HTML元素並沒有實際用處,還需要將新創建的元素插入文檔中。將新創建的節點插入文檔最簡單的辦法是,讓它成爲這個文檔的某個節點的子節點。前面使用了一個插入節點的方法append(),它會在元素內部追加新創建的內容。
將新創建的節點插入某個文檔的方法並非只有一種,在JQuery中還提供了其他兒種插入節點的方法,如下表所示。讀者可以根據實際需求靈活地做出多種選擇。
HTML DOM結構如下:
1 |
< p
class = "nm_p"
title = "歡迎訪問簡明現代魔法圖書館"
>歡迎訪問簡明現代魔法圖書館</ p > |
3 |
< li
title = 'PHP魔法' >簡單易懂的PHP魔法</ li > |
4 |
< li
title = 'JavaScript魔法' >簡單易懂的JavaScript魔法</ li > |
5 |
< li
title = 'JQuery魔法' >簡單易懂的JQuery魔法</ li > |
效果演示
歡迎訪問簡明現代魔法圖書館
- 簡單易懂的PHP魔法
- 簡單易懂的JavaScript魔法
- 新增節點:計算機算法
- 簡單易懂的JQuery魔法
- 新增節點:設計模式
- 新增節點:數據結構
append()
向每個匹配的元素內部追加內容:
4 |
$( "p" ).append( "<b>你好</b>" ); |
appendTo()
將所有匹配的元素追加到指定的元素中。實際上,使用該方法是顛倒了常規的$(A).append(B)的操作,即不是將B追加到A中,而是將A追加到B中:
4 |
$( "<b>你好</b>" ).appendTo( "p" ); |
prepend()
向每個匹配的元素內部前置內容:
4 |
$( "p" ).prepend< "<b>你好</b>" ); |
prependTo()
將所有匹配的元素前置到指定的元素中。實際上,使用該方法是顛倒了常規的$(A).prepend(B)的操作,即不是將B前置到A中,而是將A前置到B中:
4 |
$( "<b>你好</b>" ).prependTo( "p" ); |
after()
在每個匹配的元索之後插入內容:
4 |
$( "p" ).after( "<b>你好</b>" ); |
insertAfler()
將所有匹配的元素插入到指定元素的後面。實際上,使用該方法是顛倒了常規的$(A).after(B)的操作,即不是將B插入到A後面,而是將A插入到B後面:
4 |
$( "<b>你好</b>" ).insertAfter( "p" ); |
before()
在每個匹配的元素之前插入內容:
4 |
$( "p" ).before( "<b>你好</b>" ); |
insertBefore()
將所有匹配的元素捅入到指定的元素的前面。實際上,使用該方法是顛倒了常規的$(A).before(B)的操作,即不是將B插入到A前面,而是將A插入到B前面:
4 |
$( "<b>你好</b>" ).insertBefore( "p" ); |
這些插入節點的方法不僅能將新創建的DOM元素插入到文檔中,也能對原有的DOM元素進行移動。例如利用它們創建新元素並對其進行插入操作:
02 |
var
$li_1 = $( "<li title='新增節點:數據結構'>新增節點:數據結構</li>" );
|
03 |
var
$li_2 = $( "<li title='新增節點:設計模式'>新增節點:設計模式</li>" );
|
04 |
var
$li_3 = $( "<li title='新增節點:計算機算法'>新增節點:計算機算法</li>" );
|
06 |
var
$parent = $( ".nm_ul" );
|
07 |
var
$two_li = $( ".nm_ul li:eq(1)" );
|
09 |
$( "#btn_1" ).click( function (){ |
10 |
$parent.append($li_1);
|
13 |
$( "#btn_2" ).click( function (){ |
15 |
$parent.append($li_2);
|
18 |
$( "#btn_3" ).click( function (){ |
20 |
$li_3.insertAfter($two_li);
|
也利用它們對原有的DOM元素進行移動:
2 |
var
$one_li = $( "ul li:eq(1)" );
|
3 |
var
$two_li = $( "ul li:eq(2)" );
|
4 |
$two_li.insertBefore($one_li);
|
轉自:http://www.nowamagic.net/librarys/posts/jquery/7