本文實例講述了jQuery中DOM樹操作之使用反向插入方法。分享給大家供大家參考。具體分析如下：
使用反向插入方法
這裡我們先把創建的內容插人到元素前面，然後再把同一個元素插人到文檔 中的另一個位置。通常，當在jQuery中操作元素時，利用連綴方法更簡潔也更有效。可是我們現在沒有辦法這樣做，因為this是.insertBefore()的目標，是.appendTo()的內容。此時，利 用反向插入方法，可以幫我們解決問題。
像.insertBefore()和.appendTo()這樣的插人方法，一般都有一個對應的反向方法。反 向方法也執行相同的操作，只不過“目標”和“內容”正好相反。例如：
代碼如下:$('<p>Hello</p>').appendTo('#container');
與下面的代碼結果一樣：
代碼如下:$('#container').append('<p>Hello</p>');
下面我們就使用.before()代替.insertBefore()來重構代碼，參見如下代碼：
代碼如下:$(document).ready(function() {
var $notes = $('<ol id="notes"></ol>')
.insertBefore('#footer');
$('span.footnote').each(function(index) {
$(this)
.before('<sup>' + (index + 1) + '</sup>')
.appendTo($notes)
.wrap('<li></li>');
});
});
插入方法回調
反向插入方法可以接受一個函數作為參數，與.attr()和.css()方法類似。 這個傳入的函數會針對每個目標元素調用，返回被插入的HTML字符串。在此其 實也可以使用這個技術，但由於這樣就需要對每個腳注都重復一遍相同的操作， 所以還是使用一個.each()方法來得更清晰。
現在，我們可以考慮最後一步了：在正文中相應的位置創建指向匹配腳注的鏈接和在腳注中 創建指向正文位置的鏈接。為此，每個腳注需要4處標記：兩個鏈接，一個在正文中，一個在腳 注中；以及兩個id屬性。因為這樣一來，傳人.before()方法的參數會變得復雜，所以有必要 在這裡使用一種新的創建字符串的方法。
在上面的代碼中，我們使用了 操作符來拼接字符串。使用+操作符雖然沒有問題，但
如果要拼接的字符串太多，那看起來就會很亂。所以，我們在這裡使用數組的.join()方法來構 建一個更大的數組。換句話說，下面的兩行代碼結果相同。
代碼如下:var str = 'a' + 'b' + 'c';
var str = ['a', 'b', 'c'].join('');
雖然這個例子要求輸人更多字符，但使用.join()方法可以避免因要拼接的字符串過多而引 起混亂。下面我們再看看示例代碼吧，如下代碼就是使用.join()創建字符串的過程。
代碼如下:$(document).ready(function() {
var $notes = $('<ol id="notes"></ol>') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)
.before([
'<sup>', index + 1,
'</sup>'
].join(''))
.appendTo($notes)
.wrap('<li></li>');
});
});
注意，由於數組的每個元素會分別執行運算，因此不再需要把index+1放在括號裡了。 使用這種技巧，可以為腳注標簽添加一個指向頁面底部的鏈接和一個唯一的id值。同時在後 面的方法中，也要給<li>元素中添加相應的id屬性，以便該鏈接有匹配的目標，參見如下代碼：
代碼如下:$(document).ready(function() {
var $notes = $('<ol id="notes"></ol>') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)
.before([
'<a href="#footnote-', index + 1,
'"id="context-', index + 1,
'"class="context">',
'<sup>', index + 1,
'</sup></a>'
].join(''))
.appendTo($notes)
.wrap('<li id=Mfootnote-' + (index + 1) + IM></li>');
});
});
添加了這些標記之後，每個腳注標簽就有了指向頁面底部對應腳注的鏈接。那麼所剩的就是 在腳注中創建一個指向其上下文的鏈接了。為此，可以使用.appendTo()的反向方 法.append()，參見如下代碼：
代碼如下:$(document).ready(function() {
var $notes = $('<ol id="notes__></ol>')
.insertBefore('#footer');
$('span.footnote').each(function(index) {
$(this)
.before([
'<a href="#footnote-', index + 1,
'"id="context-', index + 1,
'"class = "context__>',
'<sup>', index + 1,
'</sup></a>'
].join(''))
.appendTo($notes)
.append([
' (<a href="#context-', index + 1,
'__>context</a>)'
].join(''))
.wrap('<li id="footnote-' + (index + 1) + '__></li>');
});
});
注意，這裡的href指向了腳注標簽中的id。運行結果中，可以看到包含新鏈接的腳注。
希望本文所述對大家的jQuery程序設計有所幫助。