I am having an issue with setting the html of a ul.

I am using jquery-2.1.1.min.js

My simplified code is as follows;

1. <ul id="test-ul">
2.     <li>first</li>
3.     <li>second</li>
4. </ul>
5. 
   
6. <script type="text/javascript">
7. $(document).ready(function(){
8.     $("#test-ul").html("<li>new first</li><li>new second</li>");
9. })
10. </script>

The code works fine but the browsers return errors as follows:

IE11 returns the error: 'SCRIPT438: Object doesn't support property or method 'getAttribute''

Firebug returns the error: 'TypeError: a.getAttribute is not a function'

Chrome returns the error: 'Uncaught TypeError: undefined is not a function'

I have tried all jQuery versions from 2.1.1 down to 2.0.0, all of which throw this error.

I also tried 1.11.1 which does not throw any error in any browser but I have other requirements which mean that I need to use 2.x.

Is this a known bug in 2.x or do I need to update my code?

Thanks