Inserting li element into ul of a specific div

Question

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>

Answer 1

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'}) );

Answer 2

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>