Измените <p>на <table>

Question

Я хочу изменить вывод <p id="demo> на <table> с <tr> и <td>, но он включал Javascript в вывод, поэтому он не соответствует тому, что я пробовал.

<button onclick="myFunction()">Predict</button>
<div id="demo" align="center"></div>

<script type="text/javascript">
  var selectedprg = '';
  var selectedcount = '';
  var selectedcity = '';
  var average = '';
 function myFunction() {
    document.getElementById("demo").innerHTML = `
<table>
  <tr>
    <td style="padding: 5px;">Selected program</td>
    <td style="padding: 5px;">${selectedprg}</td>
  </tr>
  <tr>
    <td style="padding: 5px;">Total number of students</td>
    <td style="padding: 5px;">${selectedcount}</td>
  </tr>
</table>'

  }

  $(document).ready(function(){
    $("#prg").change( function(){
      selectedprg = $('#prg option:selected').text(); 
      selectedcount = $('#prg option:selected').data('prgcount');
selectedcity = $('#prg option:selected').data('citycount');
      if(selectedcount > 5){
        average = selectedcount / 3 + 5;
      } else{
        average = selectedcount / 3 - 5;
      }
    });
  });
</script>

Токовый выход

Ожидаемый выход

Может ли кто-нибудь помочь в этом? Спасибо.

Answer 1

Вы можете сделать что-то вроде этого:

document.getElementById("demo").innerHTML = `
<table>
  <tr>
    <td style="padding: 5px;">Selected program</td>
    <td style="padding: 5px;">${selectedprg}</td>
  </tr>
  <tr>
    <td style="padding: 5px;">Total number of students</td>
    <td style="padding: 5px;">${selectedcount}</td>
  </tr>
</table>
`

стиль должен быть написан с помощью css, конечно.