如何在javascript渲染的div上放置一个矩形？

<div id="myDiv"></div>

var div = document.getElementById("myDiv");

var svgNS = "http://www.w3.org/2000/svg";
var rect = document.createElementNS(svgNS, "rect");

rect.setAttribute("x", "50"); // 矩形左上角的x坐标
rect.setAttribute("y", "50"); // 矩形左上角的y坐标
rect.setAttribute("width", "200"); // 矩形的宽度
rect.setAttribute("height", "100"); // 矩形的高度
rect.setAttribute("fill", "blue"); // 矩形的填充颜色

div.appendChild(rect);