Get JS result return to display underneath HTML form-CodePudding

I've createad a form using HTML and CSS. I've connected a JavaScript-file to it. Is there a way possible to make the return (when the end-user hits submit) display underneath the form instead of on its own on a new page?

(Observe that the form is in Swedish.)

I have created a JSfiddle with my HTML: https://jsfiddle.net/PontusYdstrom/85yg21oL/

function myFunction() {
var age = document.getElementById("age").value;
var lname = document.getElementById("lname").value;
var fname = document.getElementById("fname").value;
    document.getElementById("demo").innerHTML = "<p>Mitt namn är "   fname   " "   lname   " och jag är "   age   " år gammal</p>";
}

h1 {
  text-align: center;
}

#p1 {
  text-align: center;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=number], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
button {
  width: 100%;
  background-color: #00a7b9;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #00a7b9;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 250px;
  margin:auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="c-uppgift.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css">
  <title>Javascript</title>
</head>
<body>
  <h1>Personuppgifter</h1>
  <p id="p1">Fyll i namn och &aring;lder i formul&auml;ret nedan! </p>

  <div>
    <form>
      <p id="demo">
        <label for="fname">F&ouml;rnamn</label>
        <input type="text" id="fname" name="fname" placeholder="F&ouml;rnamn"><br>      
        <label for="lname">Efternamn</label>
        <input type="text" id="lname" name="lname" placeholder="Efternamn"><br>
        <label for="age">&Aring;lder:</label><br>
        <input type="number" id="age" name="age" placeholder="&Aring;lder"><br>
        <button onclick="myFunction()">Skicka</button>
      </p>
    </form>
  </div>
  
</body>
</html>

CodePudding user response：

 document.getElementById("demo").innerHTML =

You're replacing the content of the div with the id demo with the new HTML.

If you want the new HTML to appear after the form instead of replacing the form, then put the div after the form instead of around the form.