jQuery append And prepend


jQuery में text() / html() methods के अलावा कुछ और functions भी provide किये गए जिनकी help से हम easily new text / html element add कर सकते हैं। जो कि इस प्रकार हैं -

  1. append()
  2. prepend()
  3. before()
  4. after()

jQuery append

jQuery append() method का use selected element के end में new text / html content append करने के लिए किया जाता है।

jQuery append() Syntax
$(selector).append('new content');

jQuery append Example

$(".append_btn").click(function(event) {
$(".target_elm").append('<b> New appended content </b>');
});

jQuery prepend

jQuery prepend() method का use selected element के starting में new text / html content append करने के लिए किया जाता है।

jQuery prepend Example

$(".prepend_btn").click(function(event) {
$(".target_elm").prepend('<b> New prepended content </b>');
});

jQuery before

before() method new text / html content को selected element से पहले add करता है।

jQuery before() Syntax
$(selector).before("<h2>New Heading</h2>");

jQuery after

after() method new text / html content को selected element के बाद add करता है।

jQuery after Syntax
$(selector).after("<h2>New Heading</h2>");

अब इन्हे एक real example के though समझेंगे कि ये functions कैसे work करते हैं।

File : jquery_app_prep.html

CopyFullscreenClose Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Add Element methods Example </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head> 
  <body>
    <p class="target_elm">Click bellow buttons to see differences.</p>
    <p>
      <button class="append_btn">append() Content</button>
      <button class="prepend_btn">prepend() Content</button>
      <button class="before_btn">before() Content</button>
      <button class="after_btn">after() Content</button>
    </p>
    <script type="text/javascript"> 
      $(document).ready(function(){
          /*append() method*/
          $(".append_btn").click(function(event) {
            $(".target_elm").append('<b> New appended content </b>');
          });

          /*prepend() method*/
          $(".prepend_btn").click(function(event) {
            $(".target_elm").prepend('<b> New prepended content </b>');
          });

          /*before() method*/
          $(".before_btn").click(function(event) {
            $(".target_elm").before('<b> New prepended content </b>');
          });

          /*after() method*/
          $(".after_btn").click(function(event) {
            $(".target_elm").after('<b> New prepended content </b>');
          });
      });
    </script>
  </body>
</html>
Output

Click bellow buttons to see diffenreces.


I Hope , अब आप अच्छी तरह से समझ गए होंगे कि jQuery में किन - किन तरीकों से new content को add कर सकते हैं।

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook