How to append a div inside svg with javascript

Question

I am trying to figure out how can I use javascript to generate the following svg programmatically.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <rect class="bg" id="bg" x="0" y="0" width="200" height="200" fill="#0357D5"></rect>
    <foreignObject x="0" y="0" width="60" height="50">
        <div xmlns="http://www.w3.org/1999/xhtml">Thanks </div>
    </foreignObject>
</svg>

This is what I tried

const svg = document.querySelector("svg");

const svgns = "http://www.w3.org/2000/svg";

let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');  
bg.setAttribute('x',"0");
bg.setAttribute("y","0"); 
bg.setAttribute("width", "200");
bg.setAttribute("height", '200');
bg.setAttribute("fill","#0357D5");
svg.appendChild(bg); 

let fo = document.createElementNS(svgns, 'foreignObject');
fo.setAttribute("x", "0");
fo.setAttribute("y", "0");
fo.setAttribute("width", "60");
fo.setAttribute("height", "50");
svg.appendChild(fo);   

let _div = document.createElementNS(svgns, 'div');
_div.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
_div.textContent = 'Thanks';
svg.appendChild(_div);
fo.appendChild(_div);

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
</svg>

What is wrong? As far as I can see that SVG is generated when taking a look into the inspector — maxicarlos08
– maxicarlos08, Commented Mar 16, 2022 at 18:54
Javascript is generating the div but it is not visible on the svg, like the word Thanks is visible in the upper svg but not in the lower one. — smpa01
– smpa01, Commented Mar 16, 2022 at 18:56

herrstrietzel · Accepted Answer · 2022-03-16 19:16:52Z

2

You need to use createElement('div') – not createElementNS, since its not an svg element.

const svg = document.querySelector("#svg");

const svgns = "http://www.w3.org/2000/svg";

let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');  
bg.setAttribute('x',"0");
bg.setAttribute("y","0"); 
bg.setAttribute("width", "200");
bg.setAttribute("height", '200');
bg.setAttribute("fill","#0357D5");
svg.appendChild(bg); 


let fo = document.createElementNS(svgns, 'foreignObject');
fo.setAttribute("x", "0");
fo.setAttribute("y", "0");
fo.setAttribute("width", "60");
fo.setAttribute("height", "50");
svg.appendChild(fo);   

let _div = document.createElement('div');
_div.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
_div.textContent = 'Thanks';
svg.appendChild(_div);
fo.appendChild(_div);

svg{
  display:inline-block;
  width:20em;
}

<svg id="svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
</svg>

answered Mar 16, 2022 at 19:16

herrstrietzel

19.5k2 gold badges32 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smpa01 Over a year ago

Thanks. This is awesome !!! completely forgot that div is not a svg element.

Collectives™ on Stack Overflow

How to append a div inside svg with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related