Добавление элемента <p> в DIV с помощью JavaScript

Мне нужно добавить сообщение внутри этого элемента с помощью JavaScript.

<div id="messagePanel">
</div>

Вот Javascript

    var calc = document.getElementById('form');

calc.addEventListener('submit', calculateAndPrintRisk);
var total;
var riskTotal;
var age;
var bmi;
var diet;
var diabetes;




function calculateRisk() {

  age = document.querySelector('input[name="age"]:checked').value;
  bmi = document.querySelector('input[name="bmi"]:checked').value;
  diabetes = document.querySelector('input[name="diabetes"]:checked').value;
  diet = document.querySelector('input[name="diet"]:checked').value;
  age = parseInt(age);
  bmi = parseInt(bmi);
  diabetes = parseInt(diabetes);
  diet = parseInt(diet);
  total = age + bmi + diabetes + diet;
  return total;

};


function calculateAndPrintRisk() {
  var riskTotal = calculateRisk();
  var message;
  var panel = document.getElementById("messagePanel");


    if (total <= 15) {
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);
    var element = document.getElementById("messagePanel");
    element.appendChild(para);


    } else if (total <= 25) {

          alert("medium");

   } else {

         alert("high");
     }

  }

Этот элемент Div скрыт, поэтому он появляется только при отображении сообщения. Целью кода является: Когда нажата кнопка расчета, функция calculateRisk() будет вычислять значение каждого ответа (возраст, bmi, диабет, диета), суммировать их все вместе, и если общее значение <= 15, сообщение должно отображаться в поле. Этот флажок должен быть скрыт до нажатия кнопки расчета и показывается только после этого. Когда поле отображается, сообщение внутри этого окна должно отображаться и должно оставаться там до тех пор, пока я не буду снова нажимать вычисление.

#messagePanel{
width:600px;
height:150px;
border:1px solid black;
visibility: hidden;

Любая помощь будет очень оценена, поскольку Im все еще noob с javascript. Спасибо