'I need to figure out how to move a dynamic js form

This is all my code. The js is for a dynamic form but I cannot control where it pops up. If someone could point me to what code to use to move it that would be great. I'm not sure if it something to edit in my css, html or js. I have tried to position it but nothing has seemed to work, I tried it in each code but obviously I am missing something I'm just not sure what it is.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="project_1.css">
<title> Happy Tails Pet Rescue</title>
</head>
<body>
<section class="header">
<h1> Happy Tails Pet Rescue</h1>
</section>
<div class="grid-container2">
<div class="item6">
<ul style="line-height:250%;">
  <li><a href="index_project_1.html">Home</a></li>
  <li><a href="dogs.html">Dogs</a></li>
  <li><a href="cats.html">Cats</a></li>
  <li><a href="others.html">Others</a></li>
  <li><a href="adopt.html">Adopt</a></li>
  <li><a href="services.asp">Services</a></li>
</ul>
       <div class="form"> <h2>
            Adoption Form
        </h2>
        <p>
              Pick which type of pet best suits you!
        </p>
        <button onClick="GFG_Fun()">
            Dog
        </button>
        <p id="GFG_DOWN"></p>
        <button onClick="GFG_Fun()">
            Cat
        </button>
        <p id="GFG_DOWN"></p>
        <button onClick="GFG_Fun()">
            Other
        </button>
        <p id="GFG_DOWN"></p>
        <script src="final.js"></script>
        </div>
        </div>
    <div class="item10"><footer style="color:#2178ae; background-color:#fac92c;"> Copyright 2022 Happy Tails Pet Rescue, All Rights Reserved. Website created by Victoria Goff</footer></div>
</div>
    </body>
    </html>

#javascript#

var down = document.getElementById("GFG_DOWN");
           
    
    var br = document.createElement("br");
    function GFG_Fun() {
               
    
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "submit.php");
 
    
    var FN = document.createElement("input");
    FN.setAttribute("type", "text");
    FN.setAttribute("name", "FullName");
    FN.setAttribute("placeholder", "Full Name");
 
     
     var DOB = document.createElement("input");
     DOB.setAttribute("type", "text");
     DOB.setAttribute("name", "dob");
     DOB.setAttribute("placeholder", "DOB");
 
     
     var EID = document.createElement("input");
     EID.setAttribute("type", "text");
     EID.setAttribute("name", "emailID");
     EID.setAttribute("placeholder", "E-Mail ID");
 
      
      var AGE = document.createElement("input");
      AGE.setAttribute("type", "text");
      AGE.setAttribute("name", "animal age");
      AGE.setAttribute("placeholder", "Young or Adult Animal");
 
       
       var DATE = document.createElement("input");
       DATE.setAttribute("type", "text");
       DATE.setAttribute("name", "date");
       DATE.setAttribute("placeholder", "Date for Appointment");
 
                
                var s = document.createElement("input");
                s.setAttribute("type", "submit");
                s.setAttribute("value", "Submit");
                 
                
                form.appendChild(FN);
                 
                
                form.appendChild(br.cloneNode());
                 
                
                form.appendChild(DOB);
                form.appendChild(br.cloneNode());
                 
                
                form.appendChild(EID);
                form.appendChild(br.cloneNode());
                 
                
                form.appendChild(AGE);
                form.appendChild(br.cloneNode());
                 
                
                form.appendChild(DATE);
                form.appendChild(br.cloneNode());
                 
                
                form.appendChild(s);
 
                document.getElementsByTagName("body")[0]
               .appendChild(form);
              
            }

   ##CSS##

.item1 { grid-area: navigational; }
.item2 { grid-area: content; }
.item3 { grid-area: image; }
.item4 { grid-area: adopt; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'navigational navigational content image'
    'navigational navigational content image'
    'navigational navigational adopt adopt'
    'footer footer footer footer';
    gap: 5px;
    padding:10px;
    font-size: 20px;
}
.item6 { grid-area: side; }
.item7 { grid-area: header; }
.item8 { grid-area: puppy; }
.item9 { grid-area: puppy2; }
.item10 { grid-area: bottom; }


.grid-container2 {
  display: grid;
  grid-template-areas:
    'header header header'
    'side puppy2 puppy'
    'side puppy2 puppy'
    'side puppy2 puppy'
    'bottom bottom bottom';
    gap: 5px;
    padding:10px;
    font-size: 20px;
}

body {
    width: 95%;
    margin: 10px auto;
    background-color:#cfe5cc;
}


 h1 {
    color: #cfe5cc;
    background-color: #1b4793;
    font-size: 3rem;
   font-style: strong;
   font-variant: small-caps;
   text-align: center;
}

ul {
  list-style-type: none;
  margin: 4px;
  padding: 3px;
  background-color:#fac92c;
  text-align: right;
  border: solid 4px #2178ae;
  display: inline-block;
  text-decoration: none;
   text-transform: lowercase;
   font-weight: bold;
   font-size: larger;
   color: #2178ae;
   float:left;
}
.item2 {
    width: 85%;
    
}
.form {
text-align: center;}
img{
    float: right;
}
a:link {
   color: var(--font-color);  
}   

a:visited {
   color: var(--font-color);  
}   

a:hover {
   color: yellow; 
}  

a:active {
   color: purple;
} 
#content {
   width:40%;
}
footer {
    background-color:#ABDEE6;
    float:none;
    text-align: center;
}

Solution 1:^[1]

I'm new to stack overflow but I think you want to apply styling on your form. You can do this by adding class to your form element like this

//element.classList.add('myclass')
form.classList.add('form');

or remove it by using the remove function.

form.classList.remove('form')

If anyone has better solution for it, I would appreciate it.

Edit:

Create a div in html file with some ID, place the div where you want to insert your form.

<div id="mydiv"></div>

Replace the last line in JS where you're appending child at body[0] with

document.getElementById("mydiv").appendChild(form)

For more details regarding why appendChild didn't work on body. Check this link document.body.appendChild(i)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'I need to figure out how to move a dynamic js form

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]