using load function within <ul> tags

using load function within <ul> tags

Hi there im trying to use the jQuery news ticker (Found here: http://www.jquerynewsticker.com/
to load data from a feed html file using the following code:

<ul id="js-news" class="js-hidden">
    <div id="news-item"></div>
  
</ul>
<script>
    $("#news-item").load("latest-news2html.html";
});
</script>

The reason im doing this is that im working on a website for a friend who needs to be able to edit the ticker content, but the CMS her site is on doesnt recognise the ticker or allow you to make the ticker text editable, unless it is in an external html file.

The ticker works if I manualy paste the content of the html file in in place. However the above code doesnt load anything in to the website at all. If you check the source code after loading the page, it simply doesnt have the html data from the feed file in there...



By moving the code outside of the <ul> tags, it loads the data from the html file.



















<ul id="js-news" class="js-hidden">
  
  
</ul>
<div id="news-item"></div>
<script>
    $("#news-item").load("latest-news2html.html";
</script>

But it doesnt then display the data in the ticker, it displays it all at once below the ticker!
How can I load the html file in to the <Ul> tags without it breaking?

Please, does anyone know?