HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HTMLjQuery

How to Add New HTML Content using jQuery

In this article, you will learn How to Add New HTML Content using jQuery. Four jQuery Methods for add new content.

  • append()
  • prepend()
  • after()
  • before()

jQuery append() method

<html>
<head>
<title>jQuery append() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>paragraph.</p>
<p>another paragraph.</p>
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>

jQuery prepend() Method

<html>
<head>
<title>jQuery prepend() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>paragraph.</p>
<p>another paragraph.</p>
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

jQuery after() and before() Methods

<html>
<title>jquery after() and before() Methods</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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="img.jpg" alt="jQuery" width="100" height="100"><br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>

Read on Facebook

append jquery jquery ajax jquery alert jquery drag and drop jquery modal jquery selector
How to Create Remove Element or Content using jQueryPrevHow to Create Remove Element or Content using jQueryMarch 17, 2020
How to Create Get Content and Attributes in jQueryMarch 17, 2020How to Create Get Content and Attributes in jQueryNext
Search
Recent Posts
  • 7 Educational Approaches for Diverse Learners
  • 5 Best Online Payment Gateways in India
  • How to Start and Earn from Making WooCommerce Plugins
  • Step By Step Guide to Becoming a Certified Salesforce Developer
  • A Guide to Transitioning from On-Premises to Azure Services
Categories
  • Business
  • Core PHP
  • CSS
  • Digital Marketing
  • HTML
  • JAVA
  • Jobs
  • jQuery
  • Mysql
  • News
  • Others
  • Photography
  • Projects
  • Recipes
  • WordPress

  • How to Create List in HTML
  • How to use Iframe in HTML
  • How to Create a Table in HTML and CSS
  • How to Add New HTML Content using jQuery
  • CSS Property of List tag in HTML
  • How to use CSS for Table in HTML
  • How to Make Basmati Rice Recipe
  • How to Make Indian Kheer Recipe
  • How to Make Spicy Aloo Tikki
  • How to Make Aloo Matar Samosa
  • How to Make Cheese Potato Sandwich
  • How to Make Aloo Palak Methi
  • Company Visitors Management System
  • Complaint Management System using PHP
  • Directory Management System
  • Employee Record Management System
  • Hospital Management System using PHP
  • Vehicle Parking Management System

Copyright © 2022 Hub of Tutorials. All Rights Reserved. Designed by AS Webworks