標籤：
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() { // 擷取點擊事件的對象； console.log(‘%c‘ + arguments[0].target.id + ‘ click‘, ‘font-size:16px;color:red‘); });}
jQuery插入節點（移動節點）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
