jQuery appending to list click of button [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 9 years ago.

Improve this question

I am trying to have an item appended when I click this button:

<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-picture" id="addImageButton" 
onclick="onClickAddImage(this)"/></a>

To this List:

<ul id="cardList" class="cardList">
  <li class="ui-state-default" data-type="image" onclick="onClickCard(this)">
    Image 01 <img src="./Close.gif" alt="" onclick="onClickClose(this)"/>
  </li>

  <li class="ui-state-default" data-type="image" onclick="onClickCard(this)">
    Image 01 <img src="./Close.gif" alt="" onclick="onClickClose(this)"/>
  </li>
</ul>

The jQuery script I am using is:

$('#addImageButton').click(function(){
   $('.cardList').append(
   '<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01 
   <img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>'
    );
});

What is wrong?

Answer 1

You can put your appended HTML string in one line as well as <span> is not a self-closing tag, you need </span> to close it. Also remove inline onClick since you've already applied .click():

$('#addImageButton').click(function () {
    $('.cardList').append('<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01<img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>');
});

Fiddle Demo

Answer 2

Try using

$('#addImageButton').click(function(){
$('#cardList').append(
'<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01 
<img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>'
 );
});

Answer 3

Replace Your anchor tag like this

<a class="btn btn-primary"><span class="glyphicon glyphicon-picture" id="addImageButton">Click</span></a>

And the Jquery code like this

$('a #addImageButton').click(function(){
   $('.cardList').append(
   '<li class="ui-state-default" data-type="image" onclick="onClickCard(this)">Image01 
   <img src="./Close.gif" alt="" onclick="onClickClose(this)"/></li>'
    );
});