how to remove ">" when render pug into HTML

Question

I'm trying to make a calendar. When I rendered a pug code into HTML by JavaScript (Express), the html code involves < and > (which I didn't even typed at all) and it prints the result twice. there were no problem with the value I stored. how can I fix this?

Following is my code.

JavaScript:

var express = require('express');
var router = express.Router();
var moment = require('moment');
require('moment-timezone');
moment.tz.setDefault("Asia/Seoul");

//get the day of the first date of month
function getDay() {
  var date = new Date();
  var day = date.getDay();
  var _date = date.getDate();
  var firstDay = day - ((_date % 7) - 1);
  var month = date.getMonth();
  var dayPMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  var curMonth = dayPMonth[month];
  var year = date.getFullYear();
  var output = '';
  if(firstDay < 0) {
      firstDay = firstDay + 7;
  }
  for(var i = 0; i <= firstDay; i++) {
      output = output + '<li></li> '
  }

    if(month === 1) {
      if(year % 400 === 0) {
        curMonth++;
      }
      else if(year % 100 !== 0 && year % 4 === 0) {
        curMonth++;
      }
    }
    for(var i = 1; i <= curMonth; i++) {
        output = output + "<li class = \"date\">"+i;
        output = output + "</li> "
    }
    return output;
}

router.get('/', function(req, res, next) {
  var li = '';
  li = getDay();
  console.log(li);
  res.render('main', { title: 'ALMANAC', headerNum : 3, nickname : 'userId', notice: 'none', trophy : 0, money : 0, addLi : li});
});

module.exports = router;

Pug:

 ol.days.list-unstyled
   #{addLi}

Rendered HTML code:

Answer 1

This is easily handled by a pug each loop:

ol.days.list-unstyled
   each item in addLi
     li.date= item

Just pass it the list of numbers you want displayed, and leave the HTML generation to pug.