If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
jQuery में text() / html() methods के अलावा कुछ और functions भी provide किये गए जिनकी help से हम easily new text / html element add कर सकते हैं। जो कि इस प्रकार हैं -
jQuery append() method का use selected element के end में new text / html content append करने के लिए किया जाता है।
jQuery append() Syntax
$(selector).append('new content');$(".append_btn").click(function(event) {
$(".target_elm").append('<b> New appended content </b>');
});jQuery prepend() method का use selected element के starting में new text / html content append करने के लिए किया जाता है।
$(".prepend_btn").click(function(event) {
$(".target_elm").prepend('<b> New prepended content </b>');
});before() method new text / html content को selected element से पहले add करता है।
$(selector).before("<h2>New Heading</h2>");after() method new text / html content को selected element के बाद add करता है।
$(selector).after("<h2>New Heading</h2>");अब इन्हे एक real example के though समझेंगे कि ये functions कैसे work करते हैं।
File : jquery_app_prep.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Add Element methods Example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p class="target_elm">Click bellow buttons to see differences.</p>
<p>
<button class="append_btn">append() Content</button>
<button class="prepend_btn">prepend() Content</button>
<button class="before_btn">before() Content</button>
<button class="after_btn">after() Content</button>
</p>
<script type="text/javascript">
$(document).ready(function(){
/*append() method*/
$(".append_btn").click(function(event) {
$(".target_elm").append('<b> New appended content </b>');
});
/*prepend() method*/
$(".prepend_btn").click(function(event) {
$(".target_elm").prepend('<b> New prepended content </b>');
});
/*before() method*/
$(".before_btn").click(function(event) {
$(".target_elm").before('<b> New prepended content </b>');
});
/*after() method*/
$(".after_btn").click(function(event) {
$(".target_elm").after('<b> New prepended content </b>');
});
});
</script>
</body>
</html>Click bellow buttons to see diffenreces.
I Hope , अब आप अच्छी तरह से समझ गए होंगे कि jQuery में किन - किन तरीकों से new content को add कर सकते हैं।
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
