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 कर सकते हैं।