使用jquery的wrapAll()和wrap()方法包装元素

wrapAll()
把所有元素包装在一个容器中
wrap()
把每个元素分别包装在各自的容器中
before()
insertBefore()的反向方法，功能与insertBefore()类似，但操作的内容和目标与insertBefore（）相比刚好是相反的
例如：
$('<p>Hello</p>').appendTo('#container');
与下面的代码结果一样：
$('#container').append('<p>Hello</p>');
append()
appendTo()的反响方法

实例代码：

$(document).redady(function(){
    $('span.footnote').insertBefore('#footer')
    .wrapAll('<ol id="nodes"></ol>')
    .wrap('<li></li>');
})

上面的代码一定是要先插入到#footer的前面然后再逐步做后面的工作。如果先包装再插入，那么就相当于是说在原位置进行了包装，然后又移走了。会出现的效果就是ol

如下图：
另外wrapAll()与wrap() 的顺序也是不能换的。这里就相当于是先写最外层的内容，然后再一层一层的往里面写。
最后形成的html结构：

正如我们看到的html结构里面显示的，span.footnote首先被插入到了div#footer 的前面，然后全部并被包裹在了ol 中 最后使用wrap()把每个span.footnote 分别包装在了自己的一个li 中

这个功能再进行一个延伸。

实现功能描述：
把脚注信息span.footnote 从p标签中取出，按顺序加到#footer 前面。同时要在原位置留下脚注的序号信息 这里我们会使用到jquery的显示迭代 其中each() 就是一个显示迭代器。

示例代码：

$(document).ready(function(){
    $notes=$('<ol id="notes"></ol>').insertBefore('#footer');
    $('span.footnote').each(function(index){
       $('<sup>'+(index+1)+'</sup>').insertBefore(this);
       $(this).appendTo($notes).wrap('<li></li>');
    })
})

这里需要注意，必须要在脚注移动之前插入编码，否则就找不到脚注的位置了

上面的示例还可用反向插入的方法来实现，在这个例子中，通过反响插入可以使用jquery的连缀特点，使得代码更加简洁清晰

$(document).ready(function(){
    $notes=$('<ol id="notes"></ol>').insertBefore('#footer');
    $('span.footnote').each(function(index){
        $(this)
        .before('<sup>'+(index+1)+'</sup>')
        .appendTo('$notes')
        .wrap('<li></li>');
    })
    })
})

交流学习群： 530425215 互相学习共同进步 本人qq：923029991