Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- Date Picker
- Multiselect Dropdown with Checkbox
- Add Dynamic Input Field (Add More Input Field)
- submit button disable after one click
- Show hide password in Password textbox using checkbox
- Put value in the text field
- Set Data and Attributes
Customer Say
What is jQuery?
jQuery Insert New Content
jQuery provides several methods, like append(), prepend(), html(), text(), before(), after(), wrap() etc.
jQuery append() Method
he jQuery append() method is used to insert content to the end of the selected elements.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inserting HTML Contents At the End of the Elements in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Append all paragraphs on document ready
$("p").append(' <a href="#">read more...</a>');
// Append a div container on button click
$("button").click(function(){
$("#container").append("This is demo text.");
});
});
</script>
</head>
<body>
<button type="button">Insert Text</button>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti.</p>
</div>
</body>
</html>
jQuery prepend() Method
The prepend() method is used to insert content to the beginning of the selected elements.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inserting HTML Contents At the Start of the Elements in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Prepend all paragraphs on document ready
$("p").prepend("<strong>Note:</strong> ");
// Prepend a div container on button click
$("button").click(function(){
$("#container").prepend("This is demo text.");
});
});
</script>
</head>
<body>
<button type="button">Insert Text</button>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti.</p>
</div>
</body>
</html>
jQuery before() Method
The jQuery before() method is used to insert content before the selected elements.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inserting HTML Contents Before or After the Elements in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Add content after a div container on document ready
$("#container").after("<p>— The End —</p>");
// Add content before a div container on document ready
$("#container").before("<p>— Demo Text —</p>");
// Add content after heading on button click
$("button.insert-after").click(function(){
$("h1").after('<img src="/examples/images/marker-right.gif" alt="Symbol">');
});
// Add content before heading on button click
$("button.insert-before").click(function(){
$("h1").before('<img src="/examples/images/marker-left.gif" alt="Symbol">');
});
});
</script>
<style type="text/css">
h1{
display: inline-block; /* To place marker image and heading in one line */
}
body{
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<hr>
<button type="button" class="insert-before">Insert Before</button>
<button type="button" class="insert-after">Insert After</button>
<hr>
</body>
</html>
jQuery after() Method
The jQuery after() method is used to insert content after the selected elements.
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php