LearnKode

3 Example(s) of JQuery After


Description :

In this example, The jQuery after() method inserts content AFTER the selected HTML elements. after() methods can take an infinite number of new elements as parameters


JQuery After Example - 1 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn").click(function(){
    $("div").after("<p>Welcome!</p>");
  });
});
</script>
</head>
<body>

<button class="btn">Insert element</button>

<div>APPWRK IT Solutions is a complete Web Solutions </div>
<div>It offers customer-oriented web design .</div>

</body>
</html>
Try it » Download Example »

Output

Description :

In this example we are going to inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs


JQuery After Example - 2 
<!DOCTYPE html>
<html>
<head>
  <style>
  span {
    background: rgb(132, 172, 209);
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
 <div style="font-size: 60px; color:rgb(134, 8, 8)">Insert jQuery object</div><br>
<h1>Hello Appwrk IT Solutions
<span style="font-size: 40px; color:darkorchid">Appwrk IT solutions
</script>
 
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we are going to choose in paragraph and Textbox where I am dynamically inserting new paragraph and text box  in HTML page using after() method


JQuery After Example - 3 
<!DOCTYPE html>
<html>
    <head>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
    function Paragraph(){
        $("p:first").after("<p style=background-color:red>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>");
    }
    
    function Textbox(){
        $("input:text:last").after("<br><input type='text' style='height: 40px; width:250px; border-radius: 10px' name='text2'>");
    }
    </script>
    </head>
    <body>
    <p style="font-size: 30px; color:mediumvioletred">Appwrk Information</p>
    <input type="button" style="height:60px; width:250px; border-radius:10px" onclick="Paragraph()" value="let's add Appwrk Information">
    <br><br>
    <input type="text" style="height: 40px; width:250px; border-radius: 10px" name="text1">
    <br><br>
    <input type="button" style="height: 60px; width:250px; border-radius: 10px" onclick="Textbox()" value="let's add Dev Tool(Textbox)">
    </body>
    </html>
Try it » Download Example »

Output