Why does my paragraph keep moving after inserting a div into it?

Question

I created a fraction using javascript and set the position to static via css. After that i inserted the div in a paragraph via js but the paragraph still moves to the end of the document flow. How to fix that?

before inserting div after inserting div

my script:

            var rlabel = document.getElementById("test")
            
            is_fraction = true
            
            document.getElementById("btndown").disabled = false;
            // generate element instances
            var div1  = document.createElement("div")
            var span1 = document.createElement("span")
            var span2 = document.createElement("span")
            var span3 = document.createElement("span")
             
            div1.setAttribute("id","d1")
            
            //add classes
            div1.classList.add("frac")
            div1.classList.add("relative")
            span2.classList.add("symbol")
            span3.classList.add("bottom")
            
            //create textnodes
            var textspan1 = document.createTextNode("□")
            var textspan2 = document.createTextNode("/")
            var textspan3 = document.createTextNode("□")
            
            //add textnodes
            span1.appendChild(textspan1)
            span2.appendChild(textspan2)
            span3.appendChild(textspan3)

            //add spans
            div1.appendChild(span1)
            div1.appendChild(span2)
            div1.appendChild(span3)
            
            
            
            // add fraction to paragraph
            document.getElementById("test").appendChild(div1)

            //visualize the paragraph
            document.body.appendChild(document.getElementById("test"))
      
            

my html:

here is the html

i also tried it with "relative" but it didnt fixed it. i thought that the div would appear next to the word called "Rechnung: ".