Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to insert new contents in 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>&mdash; The End &mdash;</p>");

// Add content before a div container on document ready
$("#container").before("<p>&mdash; Demo Text &mdash;</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






Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link