How can i add element with jQuery or JavaScript?

Question

I want to add tag after 2nd element in my SVG with jQuery or Javascript. About this question, A lot of developer say that jQuery is not compatible in order to add and edit any elements with SVG. What's your other solution for this question?

You can see my SVG codes below:

<svg viewBox="4600 1300 500 300">
      <symbol id="pin" viewBox='0 0 24 24'><title>location on</title>
        <!--<path d='M12 2c-3.87 0-7 3.13-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'></path>
        <path d='M0 0h24v24h-24z' fill='none'></path>-->
        <image width="24" height="24" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png" />
    </symbol>

    <g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87">
      <g id="Merkez" transform="translate(10.000000, 2.000000)">
        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
        <g id="MER" transform="translate(85.000000, 98.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
          <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" />
<!-- I want to add this <use> image tag as above -->
          <text>
            <tspan x="0" y="6">MER</tspan>
          </text>
        </g>
      </g>
      <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
        <g id="YÜK" transform="translate(78.000000, 86.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
          <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" />
          <text>
            <tspan x="0" y="6">YÜK</tspan>
          </text>
        </g>
      </g>
      <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
        <g id="ŞEM" transform="translate(81.000000, 62.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">

          <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" />
          <text>
            <tspan x="0" y="6">ŞEM</tspan>
          </text>
        </g>
      </g>
      <g id="Çukurca" transform="translate(0.000000, 143.000000)">
        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
        <g id="ÇUK" transform="translate(104.000000, 50.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
          <use xlink:href="#pin" x="-5" y="-24" width="24" height="24" />
          <text>  
            <tspan x="0" y="6">ÇUK</tspan>
          </text>
        </g>
      </g>
    </g>

    </svg>

With d3.js u can draw your svg. However it's painfully a lot of work for this svg i guess. https://www.dashingd3js.com/adding-an-svg-element — Wimanicesir, Oct 25 '18 at 08:43
Are you asking for **all** the other solutions you may use? (too broad), the one we think is the best? (Primarily opinion-based) or if there is a way to make it work with jQuery? (dupe). — Kaiido, Oct 25 '18 at 08:45
@Sv443 - That is an unrelated issue. The problem here generally lies with the fact that the results of `document.createElement` aren't able to be inserted into the tree of an svg - you need to use an svg-specific element creation function, I forget it's name. Not doing so produces svgs that are broken and fail to render properly or at all. — enhzflep, Oct 25 '18 at 08:46
@enhzflep it's `createElementNS`. But it's actually also possible to do it from jQuery — Kaiido, Oct 25 '18 at 08:46
@Wimanicesir I have used d3.js, but i couldn't work with it. It didn't work. What is the wrong in this code ``d3.select("#Hakkari").select("#Yüksekova #Shape").append("use").attr("xlink:xhref","#pin").attr("x",-15).attr("y",-40);`` — John Valdetine, Oct 25 '18 at 12:44
@Wimanicesir I solved this problem. Earlier, i have added tag into , so it didnt work. I should add tag after before 2nd tag. It works! Here is my last code: `d3.select("#Hakkari").select("#Yüksekova").append("use").attr("xlink:xhref","#pin").attr("x",-15).attr("y",-40);` — John Valdetine, Oct 25 '18 at 14:49
@Wimanicesir Again, we have a problem Houston! :) https://jsfiddle.net/b8tkg24o/ - you can find a part of my map. Can you help me to add pin icon over "ŞRF" text in the example? thank you so much. — John Valdetine, Oct 31 '18 at 12:54

How can i add element with jQuery or JavaScript?

0 Answers0