How to add an SVG as a child of a DIV?

Question

In my HTML code, I have something like below:

<div id="info">...</div>
<svg id="BarChart" class="chart" width="500" height="300" transform="translate(-110, 0) rotate(-90)">...</svg>

How can I make this SVG a child of the DIV using JavaScript? I want to have a paragraph in div and then my chart.

Just use [`append`](//developer.mozilla.org/en/docs/Web/API/Element/append)? — Sebastian Simon, Oct 19 '22 at 17:54
You need [this](https://stackoverflow.com/questions/5677799/how-to-append-text-to-a-div) — Abdul Nafay, Oct 19 '22 at 18:00
See also [How to move an element into another element?](https://stackoverflow.com/q/1279957/215552) — Heretic Monkey, Oct 19 '22 at 18:05

score 1 · Answer 1 · answered Oct 19 '22 at 18:06

Find both <div> and <svg> by their IDs with document.getElementById() and use Node.appendChild() API to add one to another.


<div id="info">...</div>
<svg id="BarChart" class="chart" width="500" height="300" transform="translate(-110, 0) rotate(-90)">...</svg>

<script>
  const div = document.getElementById('info');
  const svg = document.getElementById('BarChart');
  div.appendChild(svg); // <- this will remove svg from it's previous location in DOM and append as the last element inside a div
</script>

score 0 · Accepted Answer · answered Oct 19 '22 at 18:04

0

Using appendChild:

const BarChart = document.querySelector('#BarChart');
const info = document.querySelector('#info');
info.appendChild(BarChart);

answered Oct 19 '22 at 18:04

Mr-montasir

132
1
1
8

How to add an SVG as a child of a DIV?

2 Answers2