jquery中关于append()的用法笔记---append()节点移动与复制之说

时间:2021-08-23 12:05:19

jquery中关于append()的用法笔记---append()节点移动与复制之说

  今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解。于是查了查官方的文档,貌似对这个解释的不是特别清楚。于是,亲自写了一段小白代码做了下测试,这才明白怎么回事。简言之就是,如果是将一个节点(本身存在于文档中)同时append()到很多节点下,那么就是同时复制到每个节点下一份;如果是将一个节点(本身存在于文档中)append()到一个节点下,那就是移动,并不会复制多份;而另一种情况是,如果新创建的一个节点字符串,不管是同时append()一个节点下还是很多个节点下,那么都是将这个复制到每一个节点下的。好了,废话不多说了,下面上代码。

  1、原来的HTML,在这里test.js里面没有东西暂时未空的

 <!DOCTYPE html>

 <html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title> <script src="jquery.js"></script>
<script src="test.js"></script>
</head>
<body>
<span>Hello,LaoXu!</span>
<p></p>
<p></p>
<p></p> </body>
</html>

  运行效果图

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWEAAACXCAIAAABLIX0wAAADC0lEQVR4nO3ZPU4bURhAUe9/B9lBiiwglDRBcYVEQywkaLEYwQ5IgYKQ7bke/ygYOEdfYcaPNzbSXI3N7OH++mVu/syvLs/nF2e/f/2MmV+cXV2e3/yZv/7iB5phuXgcbp+Gu4f766fh7mm4G5aLYbl4efxy8HG4HZaLd3+p3uAJzqf/8258g7N3f1nGmFMejTDG1GiEMaZGI4wxNbMf378ZY8zYzJ4BxmkEUDQCKBoBFI0AikYARSOAohFA0QigaARQNAIoGgGUasRstvnZseMb10xZvOvmR9lwp3cBX9bnb8TGPSeeRSPgSzRiZdvpp9AIOEIjZv9sXDNl8ZSTru+w8e5gbPNoRPyoEXBoI7Y+nrJ4ykk3PrvT5i8Ht37u0Ah4a8sFOeZ1wfqvbH2wvnjrwemn22NzjYBw0H3Ef27EyrKJtVo54j4CdnJoI7beYhy3EVvPMraP7yNgP0e+j4g17/tZQyNgPx/ps8bejdjpWY2Atz7S/zXWL+adXsnYbiuLdQHeOrQRz2vfEaysmbJ4Zf3Ydxwrz07ZvC/49ZM+T+sLfB2ncg24GuE0ncqVqRFwmlyZQNEIoGgEUDQCKBoBFI0AikYARSOAohFA0QigaARQNAIoGgEUjQCKRgBFI4CiEUDRCKBoBFA0AigaARSNAIpGAEUjgKIRQNEIoGgEUDQCKBoBFI0AikYARSOAohFA0QigaARQNAIoGgEUjQCKRgBFI4CiEUDRCKBoBFA0AigaARSNAIpGAEUjgKIRQNEIoGgEUDQCKBoBFI0AikYARSOAohFA0QigaARQNAIoGgEUjQCKRgBFI4CiEUDRCKBoBFA0AigaARSNAIpGAEUjgKIRQNEIoGgEUDQCKBoBFI0AikYARSOAohFA0QigaARQNAIoGgEUjQCKRgBFI4CiEUDRCKBoBFA0AigaARSNAIpGAEUjgKIRQNEIoGgEUDQCKBoBFI0AikYARSOAohFA0QigaARQNAIoGgEUjQCKRgBFI4CiEUDRCKBoBFA0AigaARSNAIpGAOUvB0YeqALwuK0AAAAASUVORK5CYII=" alt="" />

  2、编写test.js,选中一个节点,同时append()到很多节点下

 $(function(){
$('p').append($('span'));
});

  运行效果如下(原来的span标签被移动并同时复制到p标签下):

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAAB3CAIAAAAM1AL4AAADWElEQVR4nO3cy1LjMBRF0fz/T6cHVDOQrIeFKzpKrTUKtrgKxcYxg+T1hlSv3U8AmtRJLnWSS53kUie51EkudZJLneRSJ7nUSS51kkud5FInudRJLnWSS53kUie5rut8ve4dv1wzs/ju8EcG3vop2Oib67ycObmLOhN8eZ3F2Pkt1JngT3W+/rtcM7N4ZtN6wuUVsTW8U2fnS3UmWK9z+Hhm8cyml2dvDf85OHyVV2eaZigtvwvqbxk+qBcPD85vtzBcneEWr50frrNYNvl3Uhxx7TzOep3Dy+qzdQ53ac1x33mux66dnTV7X9nVea4zXtmX67x1Vp1pzvifvc7o1jNpTSsWKzLNep3v6l6wWDOzuFjfupctzs4M76dWb/qeK5tP2v870AEt+8tQJy3KIJc6yaVOcqmTXOoklzrJpU5yqZNc6iSXOsmlTnKpk1zqJJc6yaVOcqmTXOoklzrJpU5yqZNc6iTXn97P3l9z982Wj78585Gfgo2+uc7LmZO7qDPBl9dZjJ3fQp0J9n9SzXDTesLlFbE1vFNn50t1JjjjU77qs7eGX3700vxMdmmG0vK7oP6W4YN68fDg/HYLw9UZbvHa+eE6i2WTfyfFEdfO46zXObysPlvncJfWHPed53rs2tlZs/eVXZ3nOuOVfbnOW2fVmeaM/9nrjG49k9a0YrEi06zX+a7uBYs1M4uL9a172eLszPB+avWm77my+aT9vwMd0LK/DHXSogxyqZNc6iSXOsmlTnKpk1zqJJc6yaVOcqmTXOoklzrJpU5yqZNc6iSXOsmlTnKpk1zqJJc6yaVOcv3p/ez9NXffbPn4mzMf+SnY6JvrvJw5uYs6E3x5ncXY+S3UmWD/J9UMN60nXF4RW8M7dXa+VGeCMz7lqz57a/jlRy/Nz2SXZigtvwvqbxk+qBcPD85vtzBcneEWr50frrNYNvl3Uhxx7TzOep3Dy+qzdQ53ac1x33mux66dnTV7X9nVea4zXtmX67x1Vp1pzvifvc7o1jNpTSsWKzLNep3v6l6wWDOzuFjfupctzs4M76dWb/qeK5tP2v870AEt+8tQJy3KIJc6yaVOcqmTXOoklzrJpU5yqZNc6iSXOsmlTnKpk1zqJJc6yaVOcqmTXOok1z98MA+GhKgmxwAAAABJRU5ErkJggg==" alt="" />

  3、修改test.js,选中一个节点,一次append()到一个节点下

  

 $(function(){
$('p:eq(0)').append($('span'));
$('p:eq(1)').append($('span'));
$('p:eq(2)').append($('span'));
});

  效果如下:

  aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANsAAAB7CAIAAABy/WL5AAACIElEQVR4nO3XW1LCQBQA0ex/0/hhSZV5TgBJY53zhcl1BrVNwnSDkunqNwC/KJIWRdKiSFoUSYsiaVEkLYqkRZG0KJIWRdKiSFoUSYsiaVEkLYqkRZG0KJIWRdKyWeQ0rZ/aOr46MzJ8dvGXLHjqp+Cd/nmRq2sO7qLIS/z/ImfLjm+hyEs8W+T0Y3VmZHhk0+UKq1e+rcV3itz5UpGXeKrIw9cjwyObrp49tfj3wcM7uCIvt1fklvvA8lsOXyyHDw+Ob/fA4oqsefwa+eYiZ2OD/xuzI66RfU8VeXj5fG2Rh7tsreM58oO88hq5M3PtXVuRH+Rj7toPF3nqrCIv9zGftZfpnHonW6vNhlV4uaeKvC2e7WYzI8Oz+a1n09nZkcX381puehurmT+V+KX723OXSEGR3EmBFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSFkXSokhaFEmLImlRJC2KpEWRtCiSli+epuopiV/XQgAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUMAAAC7CAIAAABw52uQAAAK8ElEQVR4nO2d327bRhaH+Up9hQW6F/so+wBFFtgHaG77ELl1gaa96OYiqBujldJ1DBhI7I0syYll2ZKcFEprAUmWvZBEkZzDw6FESuTR9+GHQB4eDil6vlB/OGYwmVylMp4MokzGV8sMFplcTSYDJ9Hqq5bW0cFkcjVext1QIssNjeOrjN/Oo3UyjmXydpGxm3jlqr11dJAom6wyHi8i9bbcsbFQ5rNiXm9vYkk3xlZ542as5TKKsuJkfBllLEQo80myk/4y0f5E6UeR6tNJ1kfpzRNb1Ftl1J9nEiUqG/UWidVPRouIS4WMnCiL8su6yyjrdoPx6I1PRuPLeWItq8QqLxcZv2kdHSRGz0iKO1DEMicjMdFOOr3J9aN+6+hgNOqLZbHN9VMZSYktXfWfWjSW6zO7Go/6o1FvGbcyWrT6pY6yIw4CpX6NqP13pbhLxVX0TrJzu4y+1C3LbVzkIpao/mKRW7+o9berdOaRajrBzbDjk6Ge60Xiq7SODjw7v8noYZXr14sMl7nuuBlev57nRs1qW9evW0cHyW6lOEtXGxrGl/5vnuEqwv5ES936GzVFy5QN6VtPrD5YRtn6YBW3frVivGzVfp6O2InQcr55bpYZDs5qnFfLuC2rBL3ui2VO1LxI5yIWd+nm9eK6Ym/Z6UpZLe0u4yySe+seL5LR8zLH8/SkdLPjWS8uchuVFv9uPZf65b+xePafWZ/srW75zUnR+sIJfmv9hxDS9AQhADQfTAawACYDWACTASyAyQAWwGQAC1Rr8oMHDyrtf1dYfV7QXEo2OT7EU48j3EalLNXyIIlni7if4qJcRd0VsRrqQJkm60M8rll8qfsgXpz61/1R70rRbD2TxRpkhp1TjsniKS7L5NTSXOvcfvSela7cfpTXCO5/OlmdYzLsnBJM9jm55Z5RPTUWexYN1O1SXgik9sq13XM/AbZJaedkvaVSk3NXUbrNNVmpKbRFgEqpymSxwOeldVFRswrKOicrNWH2J2cAW6a0T7wUJXLfka7XohQogsWXZr1yFjX2f6UNsH24MgTAApgMYAFMBrAAJgNYAJNXBMHX0b9VrwVQLmmTn7TPHz566uZJ+3wn+7c10BgaTdrkh4+einVZ7Ym+FsM6DKQzvdiYKvCo+boibcoyGathJwgmf/78KZmPs9kfuSYnR7NY4LE3XjV1V6X+ewj2EEyeze5ns/vZ7M95ptO7m0FPNzk1dudn17iWqZbox5S6a5icOkvPf9Qb4z/mWOez0x47CVA1gsn399Mgydv+mWKyO2rjg99tjB7H/3VrfDYXPdYb13w36z4N8Yl57CdA1Qgmf/jw+3T67v370bu727vJcHjV7XdOi56TUw/Ex5ubHMZOsG5B/ME6b7Ddk7C3yWgMW0YweTjoXl68vDg/6Zy96Lw6PjttvTx5tt775Fqdk+MFXq+u3b3xMxmNYfsIJp+d/nr8y4/tw+/bh4/bh49bP333/Ocfin52HVkqiiqa7PMm1P89cPTYrSmA+2TEJ+YcBIAtsxffJ69vMkBD4BovAAtgMoAFMBnAApgMYAFMBrAAJgNYoEKTTX6hBVBPKjS5ugmSniSvs+SbZLBMtSZHUyODIChxgqQ/ySvMkBnMUq3J0QTJIAjKmiAZOudq8dSdsSIyg02qNbmKCZLixdth+vQrNGZtAsAA1ZocTZAMgqCsCZLiXEN9qkZW5wBmqNbkaIJkEARlTZDM+jMjuSajMRimWpMrmiDp87eEUo1oDLbh+2QAC3CNF4AFMBnAApgMYAFMBrAAJgNYAJMBLMC3UAAWsDOrUS/myhCwzZZmNZZ728fsFX27BTDGlmY1VnfbR7cxfp0mMyhgT2jYrEZ9moRSrGwCwABbmtVY1m0fPU0O0Rj2jC3Naizrto+bmIzGYJhaz2oMi79PznpdjcZgG4PfJ2/4FzkBmghDHsACmAxgAUwGsAAmA1gAkwEsgMnF4NssqCeYXAA0htpi32RFv1wznUtHtXo8hx1i3OSiruqLNukNoFIsm5y6flu8zDPM0E/XuGhvAFVj1mSf2z5mFfu4ze0goVaYNTn0ds/PW9//F9AYdoJlk0N1gqRboK7rZTIaw64wbnKYM0HS9xMs0eSivQFUh32T52R9QOW3br7GALuFwQhgAUwGsAAmA1gAkwEsgMkAFsDkYvBVE9QTTC4AGkNtsW8ysxphHzBuMrMaYU+wbDKzGmF/MGsysxphrzBrcsisRtgnLJscMqsR9gbjJofMaoT9wL7Jc5jVCLZhMAJYAJMBLIDJABbAZAALYDKABTAZwALNMPlJ+/zho6dunrTPd71rALWgGSY/fPS0UHucTWY1AjSFxpj8+fOnZD7OZn/kmsw8RNgTGmPybHY/m93PZn/OM53e3Qx6usnMQ4T9oTEm399PgyRv+2eKyZvMagRoHI0x+cOH36fTd+/fj97d3d5NhsOrbr9z6n9ODpmHCKZpjMnDQffy4uXF+Unn7EXn1fHZaevlybNC75OZhwiGaYzJZ6e/Hv/yY/vw+/bh4/bh49ZP3z3/+YdCn10zDxEM0wyTN/8+mXmIYBuGNoAFMBnAApgs8PHT/7/5tvePfz//4p/PCGlEMFngm297O//FEFIomCzw5b/aO//FEFIomCyw89/K3oaDv3YwWWDnvxUzKXQwOfKbBJMFtjbUxA7ju6Hsj7tI33mlk/XW8tlioaWlH96K+qxnMFlgm2NC7DZq1DfqLl1jJ9d7XuHS5LU7L2Xnq3uCjQsmC+SOhlSxuK74o9i/0qJ0qK+Y2qgyAsROcvsJkyanDoXSedE9r+gI2wsmCxQddl847oUZKq43jnM7FFv0SmXTnlvMXTFruz6NVR9he8FkAZ/Bl6oMJQFyazxHbbw3sUOxRa/MfWri3oYZOmU9u6zt5h6Bqo+wvWCygM/gU4ZX1pDSG326zd2lrJ6VfnL3XOnHcxO5x1NZpaIjbC+YLOAzqlLF7rqpGvdx1iATK91NKFvUW8RtiT3rm07tXtaKyuBTynL3YZMjbDKYLFD0IK694pZTzz302aumHOEdBpMFdv5bIaRoMFng71x3TZoWTBZgLhRpXDBZYD4/+W9ftXb+6yHEM5gMYIF9NJk/qQn22DuT0RhMYt9k504Umsl4Dg3FuMnS3aG4eyMYxLLJusbcvREsYdZk0UbPe75lrQ5QW8yaHHq8Q+bujWAGyyaH6ZfTXiajMTQR4yaHiXs1CiZz90awgX2T5/hoDNBcGMgAFsBkAAtgMoAFMBnAApgMYIHGmMz3QwAKzTAZjQF0ampy1oWWhb4B1ov53wEsUUeTc+cwFemq2IYAGkrtTM6dUSxdYimcfuON8QmMTJYAk9TL5DWmIqaU1h+Ip2hkBgPUy+Sw+FRET5NDNAbT1M7ksOBUxE1MRmMwQx1NDgtPRdTeJ2e9rkZjsERNTZ5TlmzMXgTzMMABLIDJABbAZAALYDKABTAZwALVmsw3PQDboUKT0Rhga5RpctGpiLnf8TLhAcCT0kxeYyqiz9UaXJsF4EM5Jm8+FTF71qHX5gD2nBJMXvuuiO5jZVKEz0YB9pZKzsne91JLP/Y0GY0BUlTyPrlSk9EYwKWSz66VN8nuu+X4g5TJ3EsRwJPyv09GNoDtw9WaABbAZAALYDKABTAZwAKYDGABTAawACYDWACTASyAyQAWwGQAC2AygAUwGcACmAxgAUwGsAAmA1gAkwEsgMkAFsBkAAtgMoAF/gKn9PS7VyV5aAAAAABJRU5ErkJggg==" alt="" />

  在debug下看,知道span被移动到了最后一个p下。

  4、新建一个字符串,将其同时append()到很多节点下:

  

 $(function(){
var abc = "<span>Hello,LaoXu!<span>";
$('p').append(abc);
});

  效果图:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAACNCAIAAAAM186IAAAD2ElEQVR4nO2ay7LjIAwF8/8/7VncmpQLgTjYlN2Q0ysCipTQPDZ8DkPl8/YPME3shovdcLEbLnbDxW642A0Xu+FiN1wyN59PfbTVX41RgkeTT0k49C9eYX831ZxiFbsZTn6Bc1q9xPJuPv+pxijBStGYobobWskTN8nHtd1020qwUrQ6OpT8r7N7vi3jpsU3IH6l24jB3U693IXkq7rJ+x92U4SJq6To2Wff5P3Klprrplullefn7hvl/IGcaXYDvW+GRjdxo7SVYKVoHDofbncKFcHv+jhz180R7oAiRgku4lt3WDGqJM8nOhY9NK/PgFkjmNXKgTIjdhPxjHCxGy52w8VuuNgNF7vhYjdc7IaL3XCxGy52w8VuuNgNF7vhYjdc7IaL3XCxGy52w8VuuNgNlwnv0/KY0Qc00x/cTPkXr7C/m2pOsYrdDCe/wLXXmsu7mfLmtls0ZqjuhlbyxE3ycW033bYSrBStjg4lrz6h1nM+T2ciWnwD4le6jRjc7dTLXUi+qpu8/2E3RZi4SoqeffZN3q9sqbluulVaeX7uvlHOH8iZZjfQ+2ZodBM3SlsJVorGofPhdqdQEfyujzN33RzhDihilOAivnWHFaNK8nyiY9FD8/oMmDWCWa0cKDNiNxHPCBe74WI3XOyGi91wsRsudsPFbrjYDRe74WI3XOyGi91wsRsudsPFbrjYDRe74WI3XOyGi91wmfA+LY8ZfUAz/cHNlH/xCvu7qeYUq9jNcPILXHutubybKW9uu0VjhupuaCVP3CQf13bTbSvBStHq6FDy6hNqPefzdCaixTcgfqXbiMHdTr3cheSrusn7H3ZThImrpOjZZ9/k/cqWmuumW6WV5+fuG+X8gZxpdgO9b4ZGN3GjtJVgpWgcOh9udwoVwe/6OHPXzRHugCJGCS7iW3dYMaokzyc6Fj00r8+AWSOY1cqBMiN2E/GMcLEbLnbDxW642A0Xu+FiN1zshovdcLEbLnbDxW642A0Xu+FiN1zshovdcLEbLnbDxW642A2XCe/T8pjRBzTTH9xM+RevsL+bak6xit0MJ7/Atdeay7uZ8ua2WzRmqO6GVvLETfJxbTfdthKsFK2ODiWvPqHWcz5PZyJafAPiV7qNGNzt1MtdSL6qm7z/YTdFmLhKip599k3er2ypuW66VVp5fu6+Uc4fyJlmN9D7Zmh0EzdKWwlWisah8+F2p1AR/K6PM3fdHOEOKGKU4CK+dYcVo0ryfKJj0UPz+gyYNYJZrRwoM2I3Ec8IF7vhYjdc7IaL3XCxGy52w8VuuNgNF7vhYjdc7IbLP7mPK6MMvElZAAAAAElFTkSuQmCC" alt="" />

  可见,同时复制到了每个节点下。

  5、新建一个字符串,将其每次append()到一个节点下:

  

 $(function(){
var abc = "<span>Hello,LaoXu!<span>";
$('p:eq(1)').append(abc);
$('p:eq(2)').append(abc);
$('p:eq(0)').append(abc);
});

  效果如下:

  aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL0AAACLCAIAAAC7lg/XAAAED0lEQVR4nO2cwbIqIQwF/f+fnre49SwrISQcUjpo90qHeKLSxeACHxfAOo9PvwE4ErwBBbwBhZk3j8d4NLo+rKkUr4a3BC59CjB8vzfDzGIXvIn4CW9MbL0F3kQ0ePP4z7CmUlxp6hOGq0gUPvFm8hRvIna9SR9XiitNh6NL4X8X03sW3lRIJiniWeBfkj7wxenFejshHG8EttabN3tjyooGmyusNy3sepMuRb3epF2iHPY3vTSvN5Oaz96n8KaXk+5TsjdLo3hT4aTfU36Cl95JlGaKcaXCrjeX23OYmkqxqY/2TGa0Ej6XwDe9as7BXb4XZugs7jJbeHMWzBYo4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0o4A0oNJyfmtesHlRoP9jQ8inA8P3eDDOLXfAm4ie8MbH1FngTcZdzvmlTnzBcRaLwiTeTp3gTcdL/CvjRpfDhkfJ6JrySTFLEs8C/JH3gi9OL9XZCON4IbK03b/bGlBUNNldYb1rY9SZdinq9SbtEOexvemlebyY1n71P4U0vJ92nZG+WRvGmwkm/p/wEL72TKM0U40qFXW8ut+cwNZViUx/tmcxoJXwugW961ZyDu3wvzNBZ3GW28OYsmC1QwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQwBtQaDg/Na9ZPajQfrCh5VOA4fu9GWYWu+BNxE94Y2LrLfAm4i7nfNOmPmG4ikThE28mT/Em4qT/FfCjS+HDI+X1THglmaSIZ4F/SfrAF6cX6+2EcLwR2Fpv3uyNKSsabK6w3rSw6026FPV6k3aJctjf9NK83kxqPnufwpteTrpPyd4sjeJNhZN+T/kJXnonUZopxpUKu95cbs9hairFpj7aM5nRSvhcAt/0qjkHd/lemKGzuMts4c1ZMFuggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeggDeg0HB+al6zelCh/WBDy6cAw/d7M8wsdsGbiJ/wxsTWW+BNxF3O+aZNfcJwFYnCJ95MnuJNxEn/K+BHl8KHR8rrmfBKMkkRzwL/kvSBL04v1tsJ4XgjsLXevNkbU1Y02FxhvWlh15t0Ker1Ju0S5bC/6aV5vZnUfPY+hTe9nHSfkr1ZGsWbCif9nvITvPROojRTjCsVdr253J7D1FSKTX20ZzKjlfC5BL7pVXMO7vK9MENncZfZwpuzYLZAAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9AAW9A4R/W+FzkGsMVbgAAAABJRU5ErkJggg==" alt="" />

  结果跟上图情况一样。

  废话了半天,总之一句话,append()是将一个本身存在的节点append()到很多节点下,那就是将原来的节点同时复制到每个节点下,同时原来的节点消失;如果是将一个节点每次append()到一个节点下,那就是移动。如果是新建的字符串节点,那都是复制。

  废话了半天,一点愚见,欢迎交流。

jquery中关于append()的用法笔记---append()节点移动与复制之说的更多相关文章

  1. jquery中的&dollar;&period;fn的用法

    JQuery里的原型prototype分析       http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法       ...

  2. js中return false&semi; jquery中需要这样写:return false&lpar;&rpar;&semi; Jquery 中循环 each的用法 for循环

    js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(f ...

  3. jQuery中的事件与动画 笔记整理

    一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...

  4. JQuery中DOM事件合成用法

    jQuery有两个合成事件——hover()方法和toggle()方法 类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法: ...

  5. JS和JQuery中的事件托付 学习笔记

    事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) &lt ...

  6. jquery中prop&lpar;&rpar;和attr&lpar;&rpar;用法

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  7. jquery中的ajax请求用法以及参数详情

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  8. jquery中的&dollar;的特殊用法

    通过父级元素选取子元素, $('父元素选择器,子元素选择器')        $('子元素选择器',父元素jquery对象); 通过$创建代码片段 $('<div/>',{ 'class' ...

  9. jQuery 中 children&lpar;&rpar; 与 find&lpar;&rpar; 用法的区别

    1.children() 与 find() 用法的区别 通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素.

随机推荐

  1. python基础-PyCharm设置作者信息模板&lowbar;修改解释器&lowbar;设置软件UTF-8编码

    一.PyCharm 设置作者信息模板 1.File---Settings---在搜索框中搜索:File and Code Templates---Python scripts #!/usr/bin/e ...

  2. 大量查询SQL语句 实例

    1.查看表结构语句:DESC   表名   2.查询所有列:select  *  from  表名   3.查询指定列:select  字段名  form  表名   4.查询指定行:SELECT * ...

  3. Spring-2-J Goblin Wars(SPOJ AMR11J)解题报告及测试数据

    Goblin Wars Time Limit:432MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Description Th ...

  4. C&num;安全API

    Bouncycastle库C#版 官网地址为:http://www.bouncycastle.org/csharp/. http://blog.csdn.net/popozhu/article/det ...

  5. 查看linux中swap内存的相关参数

    内容主要来源于:linux的内存回收和交换 各项命令查看的linux环境是:Linux SUSE-33 2.6.32.12-0.7-defaul zone? 内存管理的相关逻辑都是以zone为单位的, ...

  6. flv网页播放器播放失败

    在IIS6.0上发布网站时,在路径正确的情况下,网页flv播放器还是无法播放flv视频的解决方法. 1.打开IIS6.0管理器,打开发布的网站,点击打开属性窗口. 2.在HTTP头选项里找到MIME类 ...

  7. FreeBSD简单配置SSH并用root远程登陆方法

    FreeBSD简单配置SSH并用root远程登陆方法 前言:最近下载了FreeBSD,在虚拟机上安装,第一步先要开启SSH服务,用终端putty软件可以实现在windows系统进行远程管理, 初级 = ...

  8. SQL 分组排序、CASE&period;&period;&period;WHEN&period;&period;&period;、是否为空 查询

    select  Id,CustomerCode,CustomerName,CreateId,CreateName,Phone,StatusName,(case when phone is not nu ...

  9. ANTLR和StringTemplate实例:自动生成单元测试类

    ANTLR和StringTemplate实例:自动生成单元测试类 1. ANTLR语法 要想自动生成单元测试,首先第一步就是分析被测试类.这里以Java代码为例,用ANTLR对Java代码进行分析.要 ...

  10. Oracle 备份表数据

    --备份表数据 select * from t_owners; --创建备份表 create table t_owners_copy ( id number, name ), addressid nu ...