jQuery Add Elements, Easy To Learn jQuery Add Elements

jQuery Add Elements

jQuery provides several new Add() methods, like append(), prepend(), before(), after() etc. that allows us to add new content inside an existing element.

append() : Inserts content at the end of the selected elements.

prepend() : Inserts content at the beginning of the selected elements.

before() : Inserts content before the selected elements.

after() : Inserts content after the selected elements.

jQuery append() Method

The jQuery append() method is used to add content to the end of the selected elements.

The following example will append some HTML to all the paragraphs.

<!DOCTYPE html>
<html>
<head>
<title>jQuery append() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Free Time Learning</b>.");
    });
 
    $("#btn2").click(function(){
        $("ol").append("<li>www.freetimelearning.com</li>");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<p>What is FTL : </p>
 
<ol>
  <li>www.freetimelearning.com</li>
  <li>www.freetimelearning.com</li>
  <li>www.freetimelearning.com</li>
</ol>
 
<button id="btn1" class="btn">Append text</button>
<button id="btn2" class="btn">Append list items</button>
 
</body>
</html>

Output :

jQuery prepend() Method

The prepend() method is used to add content to the beginning of the selected elements.

The following example will prepend some HTML to all the paragraphs.

<!DOCTYPE html>
<html>
<head>
<title>jQuery prepend() Method</title>
 
<script src="../js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").prepend("<b>What is FTL</b>. ");
    });
    $("#btn2").click(function(){
        $("ol").prepend("<li>www.freetimelearning.com</li>");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<p>Free Time Learning</p>
 
<ol>
  <li>freetimelearning.com</li>
  <li>freetimelearning.com</li>
  <li>freetimelearning.com</li>
</ol>
 
<button id="btn1" class="btn">Prepend text</button>
<button id="btn2" class="btn">Prepend list items</button>
 
</body>
</html>

Output :

Add Several New Elements With append() and prepend()

The jQuery append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements. also supports passing in multiple arguments as input.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) :

<!DOCTYPE html>
<html>
<head>
<title>append() and prepend() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
function appendText(){
    var txt1 = "<h4>www.freetimelearning.com</h4>";   
    var txt2 = $("<h3></h3>").text("www.freetimelearning.com"); 
    var txt3 = document.createElement("h2");
    txt3.innerHTML = "www.freetimelearning.com";  
    $("body").append(txt1, txt2, txt3); 
}
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<button onclick="appendText()" class="btn">Click Here!</button>
<p>Dummy Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 
</body>
</html>

Output :

jQuery after() and before() Methods

The jQuery before() method is used to inserts content BEFORE the selected HTML elements.

The jQuery after() method is used to inserts content AFTER the selected HTML elements.

<!DOCTYPE html>
<html>
<head>
<title>after() and before() Methods</title>
 
<script src="../js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    // Add content after a div container on document ready
    $("#container").after("<p> Dummy text End </p>");
    
    // Add content before a div container on document ready
    $("#container").before("<p> Dummy  Text Start </p>");
    
    // Add content after heading on button click
    $("button.insert-after").click(function(){
        $("h1").after('<img src="../images/arrows-left.png" width="50" height="35" alt="FTL">');
    });
    
    // Add content before heading on button click
    $("button.insert-before").click(function(){
        $("h1").before('<img src="../images/arrows-right.png" width="50" height="35" alt="FTL">');
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
    h1{display: inline-block;}
    body{text-align: center;}
</style>
</head>

<body>
 
   <h1><img src="../images/Free-Time-Learning--22.png" width="200" height="35" alt="FTL"></h1>
    <hr>
    <button type="button" class="insert-before btn">Insert Before</button>
    <button type="button" class="insert-after btn">Insert After</button>
    <hr>
    <div id="container">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting, 
remaining essentially unchanged. It was popularised in the 1960s with the release of 
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

</body>
</html>

Output :

Add Several New Elements With after() and before()

The jQuery after() and before() methods can take an infinite number of new elements as parameters.The new elements can be generated with text/HTML (like we have done in the example above), with jQuery, or with JavaScript code and DOM elements.

In the following example we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we insert the new elements to the text with the after() method (this would have worked for before() too) :

<!DOCTYPE html>
<html>
<head>
<title>New Elements With after() and before()</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
function afterText() {
    var txt1 = "<b>Free </b>";                   // Create element with HTML
    var txt2 = $("<i></i>").text("Time ");    // Create with jQuery
    var txt3 = document.createElement("b");   // Create with DOM
    txt3.innerHTML = "Learning. ";
    $("img").after(txt1, txt2, txt3);      // Insert new elements after img
}
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<img src="images/Free-Time-Learning.png" alt="Free Time Learning">
 
<p>Click the button to insert text after the image.</p>
 
<button onclick="afterText()" class="btn">Insert after</button>
 
</body>
</html>

Output :

jQuery Tutorial