Getting the MArquee JQuery library to work

Hi

 

I have a very simple javascript, Housed in @MikaelSvenson 's excellent script editor for the Modern UI.

 

I am trying to get an announcement from the Announcements list to display on a modern UI Page from Right to Left across the page. Just like the old fashioned Marquee HTML element.  But nothing is being displayed.

 

CAn anyone see why ?

 

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<script type="text/javascript"> 
console.log("At start of REST Script");
$url = "https://<tenantname>.sharepoint.com";
$.ajax({
  url: $url +
    "/_api/web/lists/getbytitle('Announcements')/items?select=*",
  method: "GET",
  headers: {
    "Accept": "application/json; odata=verbose"
  },
  success: function(data) {
console.log("Success");
    console.log(data.d.results);
	var $dataArray = data.d.results;
	for (var $i in $dataArray)
	{
		console.log(data.d.results[$i].Title);
              var $str = $dataArray[$i].Body0;
               var $gtindex = $str.indexOf(">");
                $gtindex = $gtindex + 1;
                 $str1 = $str.substring($gtindex);
               console.log($str.substring($gtindex));

               var $ltindex = $str1.indexOf("<"); 
               console.log($ltindex);
              console.log($gtindex);
               var $length = $ltindex -$gtindex;
              var $innertext = $str1.substring(0,$ltindex);
               console.log($innertext);
               var $bodyHtml = "<li>" +$innertext + "</li>";
               $("marquee").append($bodyHtml);
	}
  },
  error: function(data) {
console.log("Failure");
    alert(JSON.stringify(error));
  }
});
$("#marquee").marquee();
console.log("At End of Script");
</script>

<ul id="marquee" class="marquee" />

Apologies for some of the code I have been debugging it.

 

Thanks

 

Nigel