021-28423015
021-28423015

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

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


افزودن محتوای جدید 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>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<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>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<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>

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"><br><br>

<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>

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">

<p>Click the button to insert text after the image.</p>

<button onclick="afterText()">Insert after</button>

</body>
</html>

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

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

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط