CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jessica
jessica

Reputation: 495

Appending a div onclick

I have a button and a div, i want to append this div once every time i click on the button, but i have a problem, the HTML code for this div is very large and i don't want that, so my question is there another method to append this div without putting the whole code in my js code? and another problem i want to append the div once only on each click but it appends it multiple times, Here is an example of what I'm talking about, i replaced my large HTML code with a small one, so here is my code: 

$(".appendbtn").click(function () {
   $(".appendme").append('<div class="appendme">The div that should be appended</div>');
});
<script
  src="https://code.jquery.com/jquery-2.2.3.min.js"
  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
  crossorigin="anonymous"></script>
<div class="appendme">The div that should be appended</div>
<button class="appendbtn" type="button">Click to append</button>

Upvotes: 0

Views: 15576

Answers (4)

AndyP9
AndyP9

Reputation: 626

Lots of answers here point out your naming error ('appendme' used for the container and the item being appended) but your issue is that you have a large string that you want to append. The object that you want to append could be placed within a script tag:

<script type="text/html" id="appendTemplate">
    <div>The div that should be appended</div>
</script>

And now your append code will be:

$(".appendbtn").click(function () {
    var template = $('#appendTemplate").html();
    $(".appendme").append(template);
});

When the button is clicked, the html content of the script tag is read into the variable 'template' which you then append to your target element.

Upvotes: 2

Rostyslav Kuzmovych
Rostyslav Kuzmovych

Reputation: 241

I would do like that :

$(".appendbtn").click(function () {
   $(".appendme:last").append(getHtml());
});

function getHtml(){
  return '<div class="appendme">The div that should be appended</div>';
}
<script
  src="https://code.jquery.com/jquery-2.2.3.min.js"
  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
  crossorigin="anonymous"></script>
<div class="appendme">The div that should be appended</div>
<button class="appendbtn" type="button">Click to append</button>

upd: function for html (from comment)

Upvotes: -1

Companjo
Companjo

Reputation: 1792

Easy to fix by adding a container.

This should do the trick:

$(".appendbtn").click(function () {
   $("#divcontainer").append('<div class="appendme">The div that should be appended</div>');
});
<script
  src="https://code.jquery.com/jquery-2.2.3.min.js"
  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
  crossorigin="anonymous"></script>
<div id="divcontainer">
  <div class="appendme">The div that should be appended</div>
</div>
<button class="appendbtn" type="button">Click to append</button>

Upvotes: 1

Brett DeWoody
Brett DeWoody

Reputation: 62871

The issue is the <div> you append to .appendme also has a class of .appendme. So when you click the button, the new <div> is being appended to every other new <div class="appendme"> that has been appended.

To fix this, remove the class or rename the class of the new <div> being appended.

$(".appendbtn").click(function () {
   $(".appendme").append('<div>The div that should be appended</div>');
});
<script
  src="https://code.jquery.com/jquery-2.2.3.min.js"
  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
  crossorigin="anonymous"></script>
<div class="appendme">The div that should be appended</div>
<button class="appendbtn" type="button">Click to append</button>

Upvotes: -1

Related Questions