How to draw svg in js?

Question

JavaScript

Svg is simple, something like axes for a graph

....
   <g class="grid x-grid" id="xGrid">
      <line x1="113" x2="113" y1="10" y2="380"></line>
      <line x1="259" x2="259" y1="10" y2="380"></line>
      <line x1="405" x2="405" y1="10" y2="380"></line>
      <line x1="551" x2="551" y1="10" y2="380"></line>
      <line x1="697" x2="697" y1="10" y2="380"></line>
    </g>
....

But I get the data as a string, that is, I need to somehow substitute them inside the svg. What is the best way to solve this problem? Use some kind of template engine and somehow substitute the obtained values ​​through iteration in a loop? I don't know how to step up.

Answer 1

You can use something like document.write - it writes directly into the document.
You can put JS variables instead of constants.
You can create a div and use JS commands to change its content.