javascript - Appending a div onclick - Stack Overflow

admin管理员组

文章数量:1415421

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=".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>

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./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 7, 2017 at 13:37 jessicajessica 49511 gold badge1010 silver badges2828 bronze badges 3

• checkout the answer here stackoverflow./a/34476766/2724173 – Ismail Farooq Commented Jul 7, 2017 at 13:40
• You called the object you insert as the object to insert – Gianfrancesco Aurecchia Commented Jul 7, 2017 at 13:41
• 1 For the first part of question the answer could be: jQuery.get() the html from your server. For the second question it's enough to add :first selector: $(".appendme:first").append( – gaetanoM Commented Jul 7, 2017 at 13:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.

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./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>

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./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>

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./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 ment)

本文标签： javascriptAppending a div onclickStack Overflow