title: How to dynamically create SVG text elements using JS
body: <p>So, I have an SVG element that is a text. I would like to dynamically create more SVG text elements of exactly the same kind using javascript. (preferably using a for loop of some kind). One option would just to hardcode in the values, but I rather not do that. Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var overlapThreshold = "50%";
  var name_count = 0;
  Draggable.create(".seat_name", {
    bounds: "svg",
    onDrag: function(e) {
      if (this.hitTest("#test1", overlapThreshold)) {
        document.getElementById("test1").setAttribute('fill', 'url(#gradRed)');
      } else {
        document.getElementById("test1").setAttribute('fill', 'url(#gradGreen)');
      }
    }
  });
  
  function change_name(event) {
    var name = prompt("Enter a New Name:");
    if (name != null &amp;&amp; name != "") {
      event.target.textContent = name;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;button id="test_button" onclick="create_name_tags()"&gt;Test&lt;/button&gt; &lt;svg height="1000" width="1000"&gt;
    &lt;defs&gt;
      &lt;lineargradient id="gradGreen" x1="0%" x2="100%" y1="0%" y2="0%"&gt;
        &lt;stop offset="0%" style="stop-color:rgb(152, 251, 152);stop-opacity:1"&gt;&lt;/stop&gt;
        &lt;stop offset="100%" style="stop-color:rgb(0, 128, 0);stop-opacity:1"&gt;&lt;/stop&gt;
      &lt;/lineargradient&gt;
      &lt;lineargradient id="gradRed" x1="0%" x2="100%" y1="0%" y2="0%"&gt;
        &lt;stop offset="0%" style="stop-color:rgb(255, 0, 0);stop-opacity:1"&gt;&lt;/stop&gt;
        &lt;stop offset="100%" style="stop-color:rgb(178, 34, 34);stop-opacity:1"&gt;&lt;/stop&gt;
      &lt;/lineargradient&gt;
    &lt;/defs&gt;
    &lt;g class="circle_seat" id="circle_seats"&gt;
      &lt;circle cx="70" cy="200" fill="url(#gradGreen)" id="test1" id="seat1" r="40" stroke="black" stroke-width="1"&gt;&lt;/circle&gt;
    &lt;/g&gt;
    &lt;g class="seat_name" id="seat_name1"&gt;
      &lt;text fill="#black" font-family="Verdana" font-size="20" id="seat1_details" ondblclick="change_name(event)" x="250" y="210"&gt;
        BLANK
      &lt;/text&gt;
    &lt;/g&gt;
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>