I want to select text
tag. I have tried different methods. This is a part of a bigger problem. I want to select the text tag and append it. Normally it works but I never worked with SVG
<div id="chart_div">
<div>
<div>
<svg width="800" height="600">
<defs></defs>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g>
<text></text>
</g>
</div>
</div>
</div>
2
You select it the same way you would any other element, eg. document.querySelector('text')
.
Here’s a working example. Note the use of x
and y
attributes on the text
element to ensure it’s actually visible – which may in fact be your actual problem.
document.querySelector('text').textContent = 'Lorem ipsum';
<div id="chart_div">
<div>
<div>
<svg width="800" height="600">
<defs></defs>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g>
<text x="50" y="50"></text>
</g>
</svg> <!-- note that this tag was missing in your original -->
</div>
</div>
</div>