jQuery ກົນລະບົບສ້າງປະກອບອາກາດ

ດ້ວຍ jQuery, ມັນສາມາດທຳລາຍການເພີ່ມປະກອບອາກາດ/ຂະນະກຳລັງການຄືກັບຕົວຢ່າງທີ່ມີກ່ອນ.

ເພີ່ມ HTML ຂະນະກຳລັງການ

ພວກເຮົາຈະຮຽນກົນລະບົບ jQuery ທີ່ນຳມາການເພີ່ມຂະນະກຳລັງການສີ່ກົນລະບົບ:

  • append() - ສ້າງຂັ້ນຫນັງຂອງປະກອບອາກາດທີ່ເລືອກ
  • prepend() - ສ້າງຂັ້ນຕົ້ນຂອງປະກອບອາກາດທີ່ເລືອກ
  • after() - ສ້າງຂັ້ນຫນັງຂອງປະກອບອາກາດທີ່ເລືອກ
  • before() - ສ້າງຂັ້ນຕົ້ນຂອງປະກອບອາກາດກ່ອນປະກອບອາກາດທີ່ເລືອກ

jQuery append() ກົນລະບົບ

jQuery append() ກົນລະບົບໃສ່ຂອງປະກອບອາກາດທີ່ເລືອກ.

ຕົວຢ່າງ

$("p").append("Some appended text.");

ທ້າທາຍຄັ້ງວັນຈິງ

jQuery prepend() ກົນລະບົບ

jQuery prepend() ກົນລະບົບໃສ່ຂັ້ນຕົ້ນຂອງປະກອບອາກາດທີ່ເລືອກ.

ຕົວຢ່າງ

$("p").prepend("Some prepended text.");

ທ້າທາຍຄັ້ງວັນຈິງ

ການໃຊ້ append() ແລະ prepend() ກົນລະບົບໃຫ້ປະກອບອາກາດໃຫ້ຫຼາຍຫຼາຍ

ໃນຕົວຢ່າງທີ່ວ່າມີກ່ອນນີ້ພວກເຮົາພຽງແຕ່ໃຊ້ກົນລະບົບ text/HTML ຫຼື HTML ໃສ່ຫນັງປະກອບອາກາດທີ່ເລືອກ.

append() ແລະ prepend() ກົນລະບົບສາມາດຍອມຮັບຈຳນວນປະກອບອາກາດໃຫ້ຫຼາຍຫຼາຍ. ສາມາດສ້າງ text/HTML ດ້ວຍ jQuery (ຄືກັບຕົວຢ່າງທີ່ວ່າມີກ່ອນ) ຫຼື ດ້ວຍລະບົບ JavaScript 代码 ແລະ DOM ປະກອບອາກາດ.

ໃນຄວາມທີ່ພິຈາລະນາຫຼັງຈາກນີ້，ພວກເຮົາສ້າງປະກອບອາກາດໃໝ່. ປະກອບອາກາດນີ້ສາມາດຖືກສ້າງດ້ວຍ text/HTML, jQuery ຫຼື JavaScript/DOM. ຫຼັງຈາກນີ້ພວກເຮົາໃຊ້ກົນລະບົບ append() ເພື່ອເພີ່ມປະກອບອາກາດໃໝ່ເຂົ້າໃນຂະນະກຳລັງການ (ການໃຊ້ prepend() ກໍ່ມີຜົນດຽວກັນ):

ຕົວຢ່າງ

function appendText()
{
var txt1="<p>Text.</p>";               // ດ້ວຍ HTML ສ້າງປະກອບອາກາດໃໝ່
var txt2=$("<p></p>").text("Text.");   // ດ້ວຍ jQuery ສ້າງປະກອບອາກາດໃໝ່
var txt3=document.createElement("p");  // ກຳຈັດປະກອບໃນ DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // ກຳຈັດປະກອບໃນຕອນຫຼັງ
{}

ທ້າທາຍຄັ້ງວັນຈິງ

ວິທີ after() ແລະ before() jQuery

ວິທີ after() jQuery ກຳຈັດຂໍ້ມູນຫຼັງປະກອບທີ່ເລືອກ

ວິທີ before() jQuery ກຳຈັດຂໍ້ມູນກ່ອນປະກອບທີ່ເລືອກ

ຕົວຢ່າງ

$("img").after("Some text after");
$("img").before("Some text before");

ທ້າທາຍຄັ້ງວັນຈິງ

ກຳຈັດປະກອບຫຼາຍອັນໃນ after() ແລະ before()

ວິທີ after() ແລະ before() ສາມາດຍອມຮັບຈຳນວນປະກອບທີ່ບໍ່ມີຈຳນວນສຳລັບຄຳສັ່ງ. ປະກອບສາມາດກຳຈັດດ້ວຍ text/HTML, jQuery ຫຼື JavaScript/DOM.

ໃນຕົວຢ່າງດ້ານຫຼັງນີ້, ພວກເຮົາກຳຈັດປະກອບໃຫຍ່ຈຳນວນ. ພວກມັນສາມາດກຳຈັດດ້ວຍ text/HTML, jQuery ຫຼື JavaScript/DOM. ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະໃຊ້ວິທີ after() ເພື່ອກຳຈັດປະກອບດັ່ງກ່າວໃນຈຸດນັ້ນ (before() ກໍ່ຈະມີຜົນດຽວກັນ):

ຕົວຢ່າງ

function afterText()
{
var txt1="<b>I </b>";                    // ກຳຈັດປະກອບດ້ວຍ HTML
var txt2=$("<i></i>").text("love ");     // ກຳຈັດປະກອບດ້ວຍ jQuery
var txt3=document.createElement("big");  // ກຳຈັດປະກອບໃນ DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // ກຳຈັດປະກອບໃນຕອນຫຼັງ img
{}

ທ້າທາຍຄັ້ງວັນຈິງ

ພັກສະພາຄູ່ມື jQuery HTML

ສຳລັບຂໍ້ມູນທີ່ສົມບູນຂອງວິທີ HTML jQuery, ກະລຸນາຢ້ຽມຢາມພັກສະພາຄູ່ມືພິພາກສາທີ່ຫຼັງນີ້: