Como imprimir o valor de um var em JS para HTML

Olá, estou desenvolvendo um programa que calcula o valor de Delta S, consegui criar um formulário para inserir os valores só que não sei passar o resultado pra HTML Eis os códigos: HTML

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title> Exemplo</title>
  </head>
  <body>
    <h1> Exemplo </h1>
    <form id="Dados-deltaS">
        <div class="grupo">

            <label for="distancia-inicial">Espaço Inicial:</label>
            <input id="distancia-inicial" name="distancia-inicial" type="text" placeholder="Digite o valor de Si em metros" class="campo">

       </div>

        <div class="grupo">
            <label for="distancia-final">Espaço Final</label>
            <input id="distancia-final" name="distancia-final" type="text" placeholder="Digite o valor de Sf em metros" class="campo">
            </div>

        <button id="calcule-deltaS" > Calcule! </button>
    </form>
    <script src="js/variação-distancia.js"></script>
  </body>
</html>

JS:


var si = document.querySelector("#distancia-inicial");
var sf = document.querySelector("#distancia-final");

var botaodeltaS = document.querySelector("#calcule-deltaS");
addEventListener("click", function(event) {
        event.preventDefault();
var form = document.querySelector("#Dados-deltaS")

var distanciaInicial = si.value;
var distanciaFinal = sf.value;

var DeltaS = distanciaFinal- distanciaInicial;
var DeltaSp = document.createElement("p");

DeltaSp.textContent = DeltaS;
});

Eu tentei utilizando document.createElement("p"), mas não consegui, queria saber o pq de não funcionar

var si = document.querySelector("#distancia-inicial"); var sf = document.querySelector("#distancia-final"); var botaodeltaS = document.querySelector("#calcule-deltaS"); botaodeltaS.addEventListener("click", function(event) { event.preventDefault(); var form = document.querySelector("#Dados-deltaS"); var distanciaInicial = si.value; var distanciaFinal = sf.value; var DeltaS = distanciaFinal - distanciaInicial; var DeltaSp = document.createElement("p"); //Definindo o pai do elemento criado. form.appendChild(DeltaSp); DeltaSp.textContent = DeltaS; });