Clear HTML page without a canvas

Question

I am wondering if there was any way to clear an HTML page without using a canvas.

I am attempting to make a simple program using JavaScript without a canvas, which draws a line from the center of the window to wherever your mouse is pointing. I can successfully draw a new line whenever and wherever the mouse is moving, but do not know how to clear the page without making a canvas and using clearRect() .

Is there any way to clear the page without a canvas?

Just in case anyone finds it helpful, here is my code:

      window.addEventListener('mousemove', function (e){
      linedraw(window.innerWidth/2, window.innerHeight/2, e.x, e.y)
      });

      function linedraw(x1, y1, x2, y2) {
    if (x2 < x1) {
        tmp = x2 ; x2 = x1 ; x1 = tmp
        tmp = y2 ; y2 = y1 ; y1 = tmp
    }

    lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    m = (y2 - y1) / (x2 - x1)

    degree = Math.atan(m) * 180 / Math.PI

    document.body.innerHTML += "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>"
}

Answer 1

Instead of appending a new div , just replace the html on every mouse move.

 window.addEventListener('mousemove', function (e){ linedraw(window.innerWidth/2, window.innerHeight/2, ex, ey) }); function linedraw(x1, y1, x2, y2) { if (x2 < x1) { tmp = x2; x2 = x1; x1 = tmp tmp = y2; y2 = y1; y1 = tmp } lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); m = (y2 - y1) / (x2 - x1) degree = Math.atan(m) * 180 / Math.PI // `document.body.innerHTML = ` instead of `document.body.innerHTML += ` document.body.innerHTML = "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>" }