本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下:
[b]使用反向插入方法[/b]
这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效。可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容。此时,利 用反向插入方法,可以帮我们解决问题。
像.insertBefore()和.appendTo()这样的插人方法,一般都有一个对应的反向方法。反 向方法也执行相同的操作,只不过“目标”和“内容”正好相反。例如:
[url=#footnote-]
'"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>');
});
});
[b]注意[/b],这里的href指向了脚注标签中的id。运行结果中,可以看到包含新链接的脚注。
希望本文所述对大家的jQuery程序设计有所帮助。