I am trying to create a <line> element and append it to a <g> element. When I do it through HTML, it works:

    <svg>
      <g id="graph-paper">
        <line class="lineStyle" x1="0" y1="0" x2="100" y2="100"></line>
      </g>
    </svg>

    <style>
       .lineStyle {
         fill: none;
         shape-rendering: crispEdges;
         stroke: black;
         stroke-width: 1px;
       }
    </style>

But when I try to add it with javascript, it doesn't:

let graphPaper = document.getElementById("graph-paper")
let line = document.createElement("line")
line.setAttribute("x1", "0")
line.setAttribute("x2", "20")
line.setAttribute("y1", "40")
line.setAttribute("y2", "80")
line.setAttribute("class", "lineStyle")
graphPaper.appendChild(line)

What am I doing wrong? I want to do it with javascript.