Google Apps Script dynamically bulleted list in an html file from Gsheet

I would like to create a dynamically bulleted list in an html file from a google apps-script with variable. and for this I would like to have some helps as I'm really new on this. at this moments mail email as fixed op[x] variables therefore if they are empty I have empty bullet list.

I have the function called luli I have variables in an array call operation expecting to be the bulleted list actually I have also created a countable variable of the sum of them

luli.gs

function luli() {
  var emailTemp = HtmlService.createTemplateFromFile('INTERVENTION-EMAIL');
  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Template Creation');
  // for bulleted list
  var operation = ws.getRange('B27:B32').getValues();
  var i = ws.getRange('$B$33').getValue();
  // used at the moment
  var op1 = wsSettings.getRange('$B$27').getValue();
  var op2 = wsSettings.getRange('$B$28').getValue();
  var op3 = wsSettings.getRange('$B$29').getValue();
  var op4 = wsSettings.getRange('$B$30').getValue();

  //email variables used at the moment
  emailTemp.op1 = op1;
  emailTemp.op2 = op2;
  emailTemp.op3 = op3;
  emailTemp.op4 = op4;

  var htmlMessage = emailTemp.evaluate().getContent();

  GmailApp.createDraft(
    mail,
    sujet,

    //send  message generated htmlbody & htmlmessage built.
    { name: nom, htmlBody: htmlMessage, cc: cc, from: from },
  );
}

I have an email template called intervention-email

intervention-email.html

<p dir="ltr">
  <span style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif"
    ><?= corps1 ?></span
  >
</p>
<ul style="list-style-type: square">
  <li dir="ltr">
    <span
      style="
        font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        font-size: 10pt;
      "
      ><?= op1 ?></span
    >
  </li>
  <li dir="ltr">
    <span
      style="
        font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        font-size: 10pt;
      "
      ><?= op2 ?></span
    >
  </li>
  <li dir="ltr">
    <span
      style="
        font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        font-size: 10pt;
      "
      ><?= op3 ?></span
    >
  </li>
  <li dir="ltr">
    <span
      style="
        font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        font-size: 10pt;
      "
      ><?= op4 ?></span
    >
  </li>
</ul>
<p>&nbsp;</p>

It will be nice to have a code generating the li bulleted list according to the information contenned in the operation variable then populating the email list. Thank you for your help.

You can push your variables into an array (or directly retrieve them as an array) and then pass the array to the template

Sample

Code.gs

...
var values = wsSettings.getRange('B27:B30').getValues().flat();
emailTemp.options = values;
var htmlMessage = emailTemp.evaluate().getContent();
...

intervention-email.html

...
<ul style="list-style-type: square">
<? for (var i = 0; i < options.length; i++) { ?>
  <li dir="ltr">
    <span style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; font-size: 10pt;">
      <?= options[i] ?>
    </span>
  </li>
<? } ?>
</ul>
...

See documentation.