jQuery Add
jQuery Add Elements
jQuery have some predefined methods to add new HTML elements or contents. It have following methods that are used to add new content.
- Append()
- Prepend()
- After()
- Before()
1. jQuery Append() method
This method are used to inserts content at the end of the selected elements
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>.com</b>."); // Adding text .com
});
});
</script>
</head>
<body>
<p>tutorialstrend</p>
<button>Append Text</button>
</body>
</html>Output
Now click on append text button to apend text at the end of selected item.
2. jQuery Prepend() method
This method are used to inserts content at the beginning of the selected elements.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").prepend(" <b>Tutorialstrend</b>"); // Adding text Tutorialstrend
});
});
</script>
</head>
<body>
<p>.com</p>
<button>Prepend Text</button>
</body>
</html>Output
Now click on Prepend text button to apend text at the starting of selected item.
3. jQuery Before() method
This method are used to inserts content before the selected elements.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").before("<b>Tutorialstrend</b>"); // Adding text Tutorialstrend
});
});
</script>
</head>
<body>
<p>.com</p>
<button>Before Text</button>
</body>
</html>Output
Now click on Before text button to inserts content before the selected elements.
4. jQuery After() method
This method are used to inserts content after the selected elements.
Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").after(" <b>Text Add After</b>.");
});
});
</script>
</head>
<body>
<p>This is my first program.</p>
<button>Insert Text</button>
</body>
</html>Output
Now click on Before text button to inserts content after the selected elements.
Prev Next