CODEWITHSUNDEEP
javascripthtmlinserthtml-lists
D M
D M

Reputation: 23

Inserting li element into ul of a specific div

I would like to use JavaScript to insert a new li element into an existing ul. The new li element would be the last item in the ul. 

<div id="foo">
   <div>
     <ul>
       <li></li>
       <li></li>
       ....insert html here....
     </ul>    
   </div>
</div>

Upvotes: 1

Views: 2599

Answers (2)

adeneo
adeneo

Reputation: 318372

Should be as easy as

var ul = document.querySelector('#foo ul');
var li = document.createElement('li');

li.innerHTML = 'new LI';
li.className = 'someclass';

ul.appendChild(li);

or in jQuery

$('#foo ul').append( $('<li />', {text : 'new LI'}) );

Upvotes: 1

bimacknyas
bimacknyas

Reputation: 37

Try ".append()"

$('#foo ul').append( '<li />' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
   <div>
     <ul>
       <li></li>
       <li></li>
       ....insert html here....
     </ul>    
   </div>
</div>

Upvotes: 0

Related Questions