2/3 jQuery - HackMD

# 2/3 jQuery ###### tags: `jQuery` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Append</title> <style> table{ width: 450px; border:2px solid black; } tr td{ border: 1px solid black; } </style> </head> <body> <button id="append">append</button> <button id="prepend">prepend</button> <button id="appendTO">appendTO</button> <button id="prependTo">prependTo</button> <button id="after">after</button> <button id="insertAfter">insertAfter</button> <button id="before">before</button> <button id="insertBefore">insertBefore</button> <button id="empty">empty</button> <button id="remove">remove</button> <hr> <table> <tr id="move"> <td>0 Gary</td> <td>garylee@iii.org.tw</td> <td>034257387</td> </tr> </table> <script src="../js/jquery-3.5.1.js"></script> <script> $(function(){ //內容清空 $('#empty').on('click',function(){ $('tbody').empty() }) //整個(remove)tbody都清掉 $('#remove').on('click',function(){ $('tbody').remove() }) let i=1; $('#append').on('click',function(){ let content = ` <tr> <td>${i} Dora</td> <td>dorayang@iii.org.tw</td> <td>034257387</td> </tr> ` //往下加 .append $('tbody').append(content) i++ }) $('#prepend').on('click',function(){ let content = ` <tr> <td>${i} Lebron</td> <td>LBJ@iii.org.tw</td> <td>034257387</td> </tr> ` //往上加 .prepend $('tbody').prepend(content) i++ }) // 移動要有DOM 往下移 .appendTo $('#appendTO').on('click',function(){ $('#move').appendTo('tbody') }) //往上移 .prependTo $('#prependTo').on('click',function(){ $('#move').prependTo('tbody') }) //往下加 .after $('#after').on('click',function(){ $('#move').after(` <tr> <td>${i} after</td> <td>after@iii.org.tw</td> <td>034257387</td> </tr> ` ) i++; }) //由上往下新增 .before $('#before').on('click',function(){ $('#move').before(` <tr> <td>${i} before</td> <td>before@iii.org.tw</td> <td>034257387</td> </tr> ` ) i++ }) //內容在前面 $('#insertAfter').on('click',function(){ $(` <tr> <td>${i} insertAfter</td> <td>insertAfter@iii.org.tw</td> <td>034257387</td> </tr> ` ).insertAfter('#move') i++ }) //內容在前面 $('#insertBefore').on('click',function(){ $(` <tr> <td>${i} insertBefore</td> <td>insertBefore@iii.org.tw</td> <td>034257387</td> </tr> ` ).insertBefore('#move') i++ }) }) </script> </body> </html> ```