افرودن محتوا

قبلی

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

افزودن محتوای جدید به 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 = "<p>Text.</p>"; // Create element with HTML
var txt2 = $("<p></p>").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 = "<b>I </b>"; // Create element with HTML
var txt2 = $("<i></i>").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>

خلاصه درس

تمرین

مشاهده پاسخ

قبلی

توسعه دهندگان

آریان آذر