如何使用JS在单击SVG矩形时添加文本

<svg width="400" height="400">
  <rect id="myRect" x="50" y="50" width="100" height="100" fill="blue" />
</svg>

var rect = document.getElementById("myRect");
rect.addEventListener("click", addText);

function addText() {
  var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
  text.setAttribute("x", "60");
  text.setAttribute("y", "120");
  text.setAttribute("fill", "white");
  text.textContent = "Hello, World!";
  
  var svg = document.querySelector("svg");
  svg.appendChild(text);
}

text {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}