افزودن محتوا به صفحه با جی کوئری

در این مقاله نحوه افزودن محتوا به صفحات وب را با کمک جی کوئری آموزش میدهیم.

با کمک جی کوئری براحتی میتوان محتوایی رابه تگی در وب افزود.

افزودن محتوای جدید به HTML

ما میخواهیم چهار متد jquery را معرفی کنیم که برای افزودن محتوای جدید به صفحه وب بکار میروند:

append() : درج محتوا در انتهای تگ انتخاب شده .
prepend() : افزودن محتوا به ابتدای تگ انتخاب شده
after() : درج محتوا بعد از تگ انتخاب شده .
before() : افزودن محتوا قبل از تگ انتخاب شده .

متد append() در جی کوئری

متد append() ، محتوا را در انتهای تگ انتخاب شده Html درج می کند:

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

مشاهده نتیجه

متد prepend()> :

>متد prepend()> محتوا را در ابتدای تگ انتخاب شده درج می کند:

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

مشاهده نتیجه

افزودن چندین محتوا با متد های append() و prepend()

در مثال زیر ما به صفحه وب خود با کمک HTML, jQuery و JavaScript/DOM سه محتوای جدید اضافه کرده ایم:

function appendText() {
var txt1 = "Text."; // Create element with HTML
var txt2 = $("").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}

مشاهده نتیجه

متد های after() و before():

متد after() در جی کوئری محتوا را بعد از تگ Html درج می کند.

متد before() محتوا را قبل از تگ HTML درج می کند.

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

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

مشاهده نتیجه

افزودن چند محتوا به کمک متد های after() و before()

در مثال زیر ما با کمک text/HTML و jQuery و JavaScript سه محتوا را به صفحه خود اضافه کرده ایم.

function afterText() {
var txt1 = "I "; // Create element with HTML
var txt2 = $("").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert new elements after <img>
}