jQuery插入节点（移动节点）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
</head>
<body style="margin:150px;">
    <div id="div001">
        <span id="spn001">1</span>
        <span id="spn002">2</span>
        <span id="spn003">3</span>
    </div>
    <div>
        <button id="btn001">click me</button>
        <button id="btn002">click me to create dom</button>
        <button id="btn003">click me to move dom</button>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="b/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/index025.js"></script>
</body>
</html>

$(function() {
    $('#btn001').click(btn001Click);
    $('#btn002').click(btn002Click);
    $('#btn003').click(btn003Click);
    initSpnClick();
});
function btn001Click() {
    var $div001 = $('#div001');
    $div001.append(createP('p n'));// L.append(in);其中L-list,in-item n
    createP('p n+1').appendTo($div001);// in.appendTo(L);
    $div001.prepend(createP('p 02'));// L.prepend(i1);其中i1-item 1
    createP('p 01').prependTo($div001);// i1.prependTo(L);
    $div001.after(createP('p b02')); // a.after(b);
    createP('p b01').insertAfter($div001);// b.insertAfter(a);
    $div001.before(createP('p a01')); // b.before(a);
    createP('p a02').insertBefore($div001);// a.insertBefore(b);
}
function createP(txt) {
    return $('<p>' + txt + '</p>');
}
function btn002Click() {
    var $p = $('<p><span>');// 这样得到的竟然是<p><span></span></p>
    // $p.html('this is in p and in span');// 这样又把span给替换了；
    $('span', $p).html('this is in span');// 用到了逗号操作符；
    $('#div001').append($p);
}
function btn003Click() {
    var $spn001 = $('#spn001');
    var $div001 = $('#div001');
    $div001.append($spn001);// 这样移动对象，其上面的事件还是保留的；
}
function initSpnClick() {
    $('span').click(function() {
        // 获取点击事件的对象: arguments[0].target.id
        console.log('%c' + arguments[0].target.id + ' click', 'font-size:16px;color:red');
    });
}