backTangent backTangent - 2 months ago 10
jQuery Question

Passing Attributes to Append function in Jquery Not Working

I am trying to pass attributes to a jquery append function. It appends the html but does not append the attributes. There are no errors shown in the console either.
Html Code :

<li>First Item</li>
<li>Second Item</li>


Javascript Code :

$('li').each(function(){
$(this).append('<span></span>', {
text: 'some text',
class: 'someClass'
})
});


I want the HTML to look like

<li>First Item <span class="someClass">some text</span></li>
<li>Second Item Item <span class="someClass">some text</span></li>

Answer

.append() is a Method, not an element object

$('li').each(function(){

  $('<span />', {
    class : 'someClass', 
    text : ' some text',
    appendTo : this
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

Comments