افزودن عناصر در jQuery

یادگیری jQuery

تعداد بازدید : 1498

تاریخ و ساعت انتشار : یک شنبه 12 آذر 1396 23:20

بوسیله جیکوئری می توانید به راحتی عناصر و محتوای جدیدی را اضافه کنید.

افزودن محتوای جدید html

چهار متد زیر برای افزودن محتوای جدید استفاده می شوند:
Append() - افزودن محتوا به انتهای عنصر انتخاب شده
Prepend() افزودن محتوا به ابتدای عنصر انتخاب شده
After() افزودن محتوا بعد از عنصر انتخاب شده
Before() افزودن محتوا قبل از عنصر انتخاب شده

متد append()

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });

    $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>

</body>
</html>

متد prepend()

این متد برای افزودن محتوا به ابتدای عنصر انتخاب شده به کار می رود.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").prepend("<b>Prepended text</b>. ");
    });
    $("#btn2").click(function(){
        $("ol").prepend("<li>Prepended item</li>");
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>

</body>
</html>

افزودن چند عنصر جدید با append() و prepend()

در هر دو مثال بالا،ما فقط متن/html را به ابتدا/انتهای عنصر انتخاب شده اضافه کردیم.
این دو متد با جاوااسکریپت یا جیکوئری،می توانند بی نهات عنصر جدید را به عنوان پارامتر دریافت کنند. عناصر جدید می توانند با متن / html ایجاد شوند(مانند مثال بالا).
در مثال زیر، چند عنصر جدید را ایجاد می کنیم، عناصر با متن/html، جیکوئری و جاوااسکریپت/DOM ساخته می شوند. سپس عناصر جدید را با متد append () اضافه می کنیم(این روش برای متد prepend() هم صدق می کند).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function appendText() {
    var txt1 = "<p>Text.</p>";              // Create text with HTML
    var txt2 = $("<p></p>").text("Text."); // Create text with jQuery
    var txt3 = document.createElement("p");
    txt3.innerHTML = "Text.";               // Create text with DOM
    $("body").append(txt1, txt2, txt3);     // Append new elements
}
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>

</body>
</html>

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

متد after() برای افزودن محتوا بعد از عنصر انتخاب شده به کارمی رود.
متد befor() برای افزودن محتوا قبل از عنصر انتخاب شده به کارمی رود.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("img").before("<b>Before</b>");
    });

    $("#btn2").click(function(){
        $("img").after("<i>After</i>");
    });
});
</script>
</head>
<body>

<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>

</body>
</html>

افزودن چند عنصر جدید با after()و before()

دو متد after() و before()با جاوااسکریپت یا جیکوئری،می توانند بی نهات عنصر جدید را به عنوان پارامتر دریافت کنند. عناصر جدید می توانند با متن / html ایجاد شوند(مانند مثال بالا).
در مثال زیر، چند عنصر جدید را ایجاد می کنیم، عناصر با متن/html، جیکوئری و جاوااسکریپت/DOM ساخته می شوند. سپس عناصر جدید را با متد after () اضافه می کنیم(این روش برای متد before() هم صدق می کند).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
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
}
</script>
</head>
<body>