jQuery Tutorial

jQuery Get()/Post() Methods jQuery load() Method Introduction to AJAX jQuery CSS() Method jQuery CSS Classes jQuery Remove jQuery Add Getting and setting content Introduction to DOM manipulation jQuery Stop Effect jQuery Animation Effect jQuery Sliding Effect jQuery Fading Effect jQuery hide/show Effect jQuery Document/Window Events jQuery Form Events jQuery Keyboard Events jQuery Mouse Events jQuery Events jQuery Selectors jQuery Example jQuery Syntax How to use jQuery jQuery Introduction jQuery Tutorial jQuery each() method

jQuery Add
2018-06-27 11:08:41

jQuery Add

Using the jQuery, it is easy to add new content. Here are four jQuery methods to add new content: 

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

jQuery append() Method

The jQuery append() method is used to insert the content at the end of the selected HTML elements. Syntax: 
$(selector).append(content, function(index, html))
Content: Content is a mandatory parameter which is used to specify the content you want to insert. Its possible values can be DOM elements, HTML elements and jQuery objects. Function: Function is an optional parameter which is used to specify the function that returns the content to insert. Index: It is used to return the index position of the content. HTML: It is used to return the current HTML of the selected content.

Example:

<!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 the first paragraph.</p>  
<p>This is the second 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>
Try Now

jQuery prepend() Method

jQuery prepend() method is used to insert the content at the beginning of the selected HTML contents. jQuery prepend() method is opposite of the jQuery append() method. Syntax: 
$(selector).prepend(content,function(index,html))
Content: Content is a mandatory parameter which is used to specify the content you want to insert. Its possible values can be DOM elements, HTML elements and jQuery objects. Function: Function is an optional parameter which is used to specify the function that returns the content to insert. Index: It is used to return the index position of the content. HTML: It is used to return the current HTML of the selected content.

Example:

<!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(){  
        $("h2, p").prepend("<b>Prepended text</b>.");  
    });  
    $("#btn2").click(function(){  
        $("ol").prepend("<li>Prepended item</li>");  
    });  
});  
</script>  
</head>  
<body>  
<h2> Hello World.</h2>  
<p>this is a 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>
Try Now

jQuery after() method

The jQuery after() method is used to insert the content after the selected HTML elements. It is just like jQuery append() method. Syntax: 
$(selector).after(content,function(index))
Content: Content is a mandatory parameter which is used to specify the content you want to insert. Its possible values can be DOM elements, HTML elements and jQuery objects. Function: Function is an optional parameter which is used to specify the function that returns the content to insert. Index: It is used to return the index position of the content. HTML: It is used to return the current HTML of the selected content.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn2").click(function(){  
        $("h2").after("<i>After</i>");  
    });  
});  
</script>  
</head>  
<body>  
<h2>Hello, world!</h2>  
<button id="btn2">Insert after</button>  
</body>  
</html>
Try Now

jQuery before() Method

The jQuery before() method is used to insert the content before the selected HTML elements. Syntax: 
$(selector).before(content, function(index)
Content: Content is a mandatory parameter which is used to specify the content you want to insert. Its possible values can be DOM elements, HTML elements and jQuery objects. Function: Function is an optional parameter which is used to specify the function that returns the content to insert. Index: It is used to return the index position of the content.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn2").click(function(){  
        $("h2").before("<i><b>Before</b> </i>");  
    });  
});  
</script>  
</head>  
<body>  
<h2>Hello, World!</h2>  
<button id="btn2">Insert before</button>  
</body>  
</html>
Try Now