Insert SharePoint Announcements into DIV via Javascript

Question

I'm quite green when it comes to coding in HTML and JavaScript, so pardon any mistakes that may appear in my code. I was wondering if it was possible to iterate thru a SharePoint Announcement list, and insert the title of the announcement into a set of 3 different DIVs on my News Rotator that I have on my companies intranet home page. Eventually, I'd like to roll up announcements from several subsites into the home page. I have found some code snippets online that allow me to get the list data, and output them to an alert, but I just can't seem to wrap my head around how I'd accomplish the task described above. See blow for the HTML and JavaScript. Any and all assistance would be appreciated, and many thanks in advance

<div id="mainContent">
   <div id="homeBanner">
      <div class="results_list">
         <div style="left: 0px; display: block; z-index: 1;">
            <div class="photo">​​​​ 
           <img class="ms-rtePosition-3" src="/SiteAssets/3.png" alt=""   style="width: 1282px; height: 380px;"/></div>
            <div class="title1">New Hire</div>
            <div class="body1"> ​James Bond has joined the trained assasin department. Please welcome him!</div>
         </div>
         <div style="left: -1282px; display: none; z-index: 1;">
            <div class="photo">
               <img src="/SiteAssets/6.png" alt=""/> 
            </div>
            <div class="title2">Personal Use of Tax Software</div>
            <div class="body2"> A polite reminder about using firm software to create tax havens for yourself.</div>
         </div>
         <div style="left: -1282px; display: none; z-index: 1;">
            <div class="photo">
               <img src="/SiteAssets/85.png" alt=""/> 
            </div>
            <div class="title3">Audit Annoucement</div>
            <div class="body3"> Due to over auditing, our audit team is now     auditing itself</div>
         </div>
      </div>
   </div>
</div>

<script type="text/javascript"  src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPSer vices-0.7.1a.min.js"></script>

<script>



    var siteUrl = 'http://somesite.com/';

function retrieveListItems() {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');
     alert(oList);   
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>  <RowLimit>100</RowLimit></View>');
    alert(camlQuery);   
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this,  this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

}

retrieveListItems();

function onQuerySucceeded(sender, args) {
alert('inside of succeeded');
    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();
        var counter = 0;
    while (listItemEnumerator.moveNext()) {
        counter++;
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '---Iteration: ' + counter + '\nTitle: ' +   oListItem.get_item('Title');
    }

    alert(listItemInfo.toString());


}

function onQueryFailed(sender, args) {
alert('inside of failed');
    alert('Request failed. ' + args.get_message() + '\n' +     args.get_stackTrace());
    }

            var ball = 3+4;
            document.getElementsById('abstract1')[0].innerHTML = ball;



     </script>

Answer 1

You can use a span like:

<span id="myspan"></span>    

Then you can set it with:

$('#myspan').text(listItemInfo);