jQuery การเพิ่มสิ่งที่มีตัวอักษร

ด้วย jQuery สามารถเพิ่มสิ่งที่มีตัวอักษรใหม่/เนื้อหาง่ายๆ

เพิ่มสิ่งที่มีตัวอักษรใหม่ HTML ใหม่

เราจะเรียนรู้สี่วิธี jQuery ที่ใช้เพื่อเพิ่มสิ่งที่มีตัวอักษรใหม่

  • append() - ใส่สิ่งที่มีตัวอักษรใหม่ในปลายของตัวเลือกที่เลือก
  • prepend() - ใส่สิ่งที่มีตัวอักษรใหม่ในต้นของตัวเลือกที่เลือก
  • after() - ใส่สิ่งที่มีตัวอักษรใหม่หลังตัวเลือกที่เลือก
  • before() - ใส่สิ่งที่มีตัวอักษรใหม่ก่อนตัวเลือกที่เลือก

วิธี append() ของ jQuery

วิธี append() ของ jQuery ใส่สิ่งที่มีตัวอักษรใหม่ในปลายของตัวเลือกที่เลือก

উদাহরণ

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

আপনার নিজেই চেষ্টা করুন

วิธี prepend() ของ jQuery

วิธี prepend() ของ jQuery ใส่สิ่งที่มีตัวอักษรใหม่ในต้นของตัวเลือกที่เลือก

উদাহরণ

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

আপনার নিজেই চেষ্টা করুন

เพิ่มสิ่งที่มีตัวอักษรใหม่ด้วยวิธี append() และ prepend()

ในตัวอย่างด้านบน เราใส่ text/HTML ในต้น/ปลายของตัวเลือกที่เลือก

อย่างไรก็ตาม วิธี append() และ prepend() สามารถรับค่าพารามิเตอร์จำนวนไม่จำกัดของสิ่งที่มีตัวอักษรใหม่ โดยผ่าน jQuery ที่สร้าง text/HTML (เช่นในตัวอย่างด้านบน) หรือโดยรหัส 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);         // নতুন তত্ত্ব যোগ করা
{}

আপনার নিজেই চেষ্টা করুন

jQuery after() ও before() পদ্ধতি

jQuery after() পদ্ধতির মাধ্যমে নির্বাচিত তত্ত্বের পরে নিঃসরণ যোগ করা

jQuery before() পদ্ধতির মাধ্যমে নির্বাচিত তত্ত্বের পূর্বে নিঃসরণ যোগ করা

উদাহরণ

$("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("প্রেম ");     // jQuery-দ্বারা নতুন তত্ত্ব সৃষ্টি করা
var txt3=document.createElement("big");  // DOM-দ্বারা নতুন তত্ত্ব সৃষ্টি করা
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // img-এর পরে নতুন তত্ত্ব যোগ করা
{}

আপনার নিজেই চেষ্টা করুন

jQuery HTML তথ্যপত্র

যদি আপনি jQuery HTML পদ্ধতির সম্পূর্ণ বিবরণ জানতে চান, তাহলে নিচের তথ্যপত্রটি পরিদর্শন করুন: