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'); }); }