Google apps script news (announcement) display using html service

I'm trying to retrieve posts from an announcement page of Google sites and display using an apps script gadget.

HTML page

<html>
  <body>
    <div>
<?
 var site = SitesApp.getSite("google.com", "smgeneral");
 var page = site.getChildByName("news");
 var announcements = page.getAnnouncements({ start: 0, max: 1, includeDrafts: false, includeDeleted: false});

   for (var i = 0; i < announcements.length; i++) { ?>
    <div><?= announcements[i].getHtmlContent(); ?></div>
<? } ?>

     </div>
  </body>
</html>

Script:

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Output:

<table class='sites-layout-name-one-column sites-layout-hbox' cellspacing='0'><tbody><tr>...........</td></tr></tbody></table>

When I embed the script in a page it is showing the html code. How could I show the formatted content? Please help. Thanks.

Solution

Instead of pre-loading, load it as a Script after the page is loaded:

in HTML:

<div id="contentHere"></div>
<script>
function getNews(){
  google.script.run.withSuccessHandler(updateDiv).getUnreadEmails();
}

function updateDiv( content ){
  document.getElementById('contentHere').innerHTML(content);
}

getNews();
</script>

in code.gs:

var site = SitesApp.getSite("google.com", "smgeneral");
var page = site.getChildByName("news");
var announcements = page.getAnnouncements({ start: 0, max: 1, includeDrafts: false, includeDeleted: false});

var html = "";
for (var i = 0; i < announcements.length; i++) { 
  html += <div><?= announcements[i].getHtmlContent(); ?></div>;
}

return html;