javascript - 如何在 Javascript 中为每次迭代增加填充？

Question

我正在尝试为除法运算的每次迭代增加填充，每次除法迭代结果都必须向右移动。这是我的代码:

<script>
    function test(n,m){
        var x = "";
        var y = n/m;
        var z = Math.floor(y)*m; 
        var p = n%m;
        var t = document.querySelector("#demo");
        t.style.paddingLeft = "5%";

        if(n<m)
        {
            return "";
        }
        else
        {
            x =  m +"|"+n+"|"+Math.floor(y)+"<br>"+"&nbsp&nbsp&nbsp"+z+"  <br>"+"&nbsp&nbsp"+"___"+"<br>"+"&nbsp&nbsp&nbsp&nbsp"+p;
            return (x +"<br>"+ test(Math.floor(y),m));
        }
    } 
</script>
Enter The Divident: <input type="text" id="num" size="20"> <br> <br>
Enter The Divisior: <input type="text" id="numb" size="20"><br>
<button onclick="document.getElementById('demo').innerHTML=  test(parseInt(document.getElementById('num').value),parseInt(document.getElementB    yId('numb').value));">Try it</button> <br> <br>
<div id="demo" style="border:0px solid black; margin-left:0px">
</div>

Answer 1

将递归输出包装在一个 div 中，然后使用 CSS 来添加填充，就像这样

CSS

<style>
    #demo div {
        padding-left: 5%;
    }
</style>

(略微)修改代码

<script>
    function test(n, m) {
        var x = "";
        var y = n / m;
        var z = Math.floor(y) * m;
        var p = n % m;
        var t = document.querySelector("#demo");

        if (n < m) {
            return "";
        }
        else {
            x = m + "|" + n + "|" + Math.floor(y) + "<br>" + "&nbsp&nbsp&nbsp" + z + "  <br>" + "&nbsp&nbsp" + "___" + "<br>" + "&nbsp&nbsp&nbsp&nbsp" + p;
            return (x + "<div>" + test(Math.floor(y), m) + "</div>");
        }
    }
</script>
Enter The Divident: <input type="text" id="num" size="20"> <br> <br>
Enter The Divisior: <input type="text" id="numb" size="20"><br>
<button onclick="document.getElementById('demo').innerHTML=test(parseInt(document.getElementById('num').value),parseInt(document.getElementById('numb').value));">Try it</button> <br> <br>
<div id="demo" style="border:0px solid black; margin-left:0px"></div>