← Back to jQuery Course | Chapter 5: DOM Manipulation | Lesson 4 of 9

किसी Element के अंदर Content Insert करना

append() किसी element के अंत में content जोड़ता है।

In this page:

  1. append()
  2. prepend()
  3. मौजूदा Elements Append करना
  4. Text और HTML Append करना
  5. एक List बनाना
Syntax
javascript 
$(selector).append(content);
$(selector).prepend(content);

append()

append() method नए content को selected element के अंदर आख़िरी child के रूप में insert करता है, पहले से मौजूद किसी भी content के बाद। यह किसी मौजूदा container के अंत में नए rows, list items, या messages जोड़ने का standard तरीका है।

उदाहरण: append()

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Append Item</button><button id="resetBtn" class="secondary">Reset</button>
  <ul id="list" class="stage" data-label="#list"><li>Item 1</li></ul>
  <div id="output"></div>
  <script>
    var orig = $("#list").html();
    var n = 1;
    $("#runBtn").click(function () {
      n++;
      $("#list").append("<li class='fresh'>Item " + n + "</li>");
      $("#list li").not(":last").removeClass("fresh");
      $("#output").text("append() added Item " + n + " to the END of the list (" + $("#list li").length + " items)");
    });
    $("#resetBtn").click(function () {
      n = 1;
      $("#list").html(orig);
      $("#output").text("");
    });
  </script>
</body>
</html>

prepend()

prepend() किसी element के बिल्कुल शुरू में content जोड़ता है, उसके किसी भी मौजूदा children से पहले। इसे तब इस्तेमाल करें जब नए items -- जैसे किसी chat feed में सबसे नया message -- को आख़िर में नहीं बल्कि पहले दिखना हो।

उदाहरण: prepend()

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Prepend Item</button><button id="resetBtn" class="secondary">Reset</button>
  <ul id="list" class="stage" data-label="#list"><li>Item 1</li></ul>
  <div id="output"></div>
  <script>
    var orig = $("#list").html();
    var n = 1;
    $("#runBtn").click(function () {
      n--;
      $("#list").prepend("<li class='fresh'>Item " + n + "</li>");
      $("#list li").not(":first").removeClass("fresh");
      $("#output").text("prepend() added Item " + n + " to the START of the list (" + $("#list li").length + " items)");
    });
    $("#resetBtn").click(function () {
      n = 1;
      $("#list").html(orig);
      $("#output").text("");
    });
  </script>
</body>
</html>

मौजूदा Elements Append करना

append() सिर्फ नया markup insert करने के बजाय किसी मौजूदा element को एक नई position में move भी कर सकता है। क्योंकि एक DOM element एक समय में सिर्फ एक जगह मौजूद हो सकता है, इसे कहीं और append करना automatically इसे उसके पुराने parent से detach कर देता है।

उदाहरण: Append Existing Elements

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Move "Move me"</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="a" class="box"><span class="label">Box A</span><p id="moveMe" class="item">Move me</p></div>
  <div id="b" class="box"><span class="label">Box B</span></div>
  <div id="output"></div>
  <script>
    var orig = $("#a, #b").map(function () { return this.innerHTML; }).get();
    $("#runBtn").click(function () {
      var target = $("#moveMe").parent().attr("id") === "a" ? "#b" : "#a";
      $(target).append($("#moveMe"));
      $("#moveMe").addClass("fresh");
      $("#output").text("append() MOVED the existing element into " + (target === "#b" ? "Box B" : "Box A") + " (it was not copied)");
    });
    $("#resetBtn").click(function () {
      $("#a").html(orig[0]);
      $("#b").html(orig[1]);
      $("#output").text("");
    });
  </script>
</body>
</html>

Text और HTML Append करना

append() plain text या पूरी HTML strings insert कर सकता है, और jQuery insert करने से पहले HTML strings को असली elements में parse करता है। यह हर element को manually बनाए बिना markup के छोटे टुकड़े जल्दी बनाना आसान बना देता है।

उदाहरण: Append Text and HTML

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Append Text and HTML</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="box" class="stage" data-label="#box (starts empty)"></div>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      $("#box").append("<strong>Bold</strong> text");
      $("#output").text("#box now contains: " + $("#box").html());
    });
    $("#resetBtn").click(function () {
      $("#box").empty();
      $("#output").text("");
    });
  </script>
</body>
</html>

एक List बनाना

Appending नए list items को एक बार में एक जोड़ने के लिए खासतौर पर उपयोगी है, जैसे हर बार user के task जोड़ने पर किसी ul पर एक नया li push करना। एक loop के साथ combined, यह dynamic lists render करने के लिए एक common pattern है।

उदाहरण: Build a List

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <input type="text" id="taskInput" placeholder="New task"><button id="addBtn">Add Task</button><button id="resetBtn" class="secondary">Reset</button>
  <ul id="tasks" class="stage" data-label="#tasks"></ul>
  <div id="output"></div>
  <script>
    function addTask() {
      var text = $.trim($("#taskInput").val());
      if (!text) {
        $("#output").text("Type a task first");
        return;
      }
      $("#tasks li").removeClass("fresh");
      $("#tasks").append($("<li class='fresh'>").text(text));
      $("#taskInput").val("").focus();
      $("#output").text("Added \"" + text + "\" - " + $("#tasks li").length + " task(s)");
    }
    $("#addBtn").click(addTask);
    $("#taskInput").on("keydown", function (e) { if (e.key === "Enter") addTask(); });
    $("#resetBtn").click(function () {
      $("#tasks").empty();
      $("#taskInput").val("");
      $("#output").text("");
    });
  </script>
</body>
</html>
Related Topics

किसी Element के बाहर Content Insert करना · Elements हटाना और Detach करना · Elements को Replace करना · Elements को Wrap और Unwrap करना

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. unclosed या invalid HTML वाली एक string append करना, जैसे "<li>Item 2", जिसे browser फिर unpredictably repair करता है।
  2. .append() और .prepend() को mix up करना, इसलिए नए items अंत में आ जाते हैं जब आप उन्हें पहले चाहते थे।
  3. पहले से मौजूद किसी element को .append() को pass करना और एक copy की उम्मीद करना; यह अपनी पुरानी position से move हो जाता है, इसलिए copy के लिए .clone() इस्तेमाल करें।
🔒

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson Reading and Modifying Properties Next Lesson → Inserting Content Outside Elements

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.