How to append div tag into a SVG rect element?

Question

I couldn't find a correct solution for this problem so I decided to write a new question.

I'm not even sure that this is possible but I hope it is.

So here is my HTML that the browser provides. I'm copying it from the "Elements" tab in the browser.

<svg width="960" height="728" style="margin-left: 0px;">
<g transform="translate(0,24)" style="shape-rendering: crispEdges;">
    <g class="depth">
        <g>
            <g>
                <rect class="child" x="0" y="0" width="960" height="704" style="fill: rgb(192, 192, 192);">1.1.1.
                    <div class="jstree">
                        <div>TestContent</div>
                    </div>
                </rect>
            </g>
        </g>
    </g>
</g>

(I'm creating everything with JS).

My problem is that I'm creating this div inside the rect tag, but this div and its content doesn't appear on the screen inside the rectangle.

I want to know if it is possible to make it appear and if it is how ?

Answer 1

Unfortunately, it's not possible: you cannot append an HTML element to an SVG element.

The only way for using a div (or a p , h1 , li etc) in an SVG is by using foreignObject . In your code, something like this:

 <svg width="960" height="728" style="margin-left: 0px;"> <g transform="translate(0,24)" style="shape-rendering: crispEdges;"> <g class="depth"> <g> <g> <rect class="child" x="0" y="0" width="960" height="704" style="fill: rgb(192, 192, 192);"> </rect> <foreignObject x="100" y="100" width="100" height="100"> <div xmlns="http://www.w3.org/1999/xhtml" class="jstree"> <div>TestContent</div> </div> </foreignObject> </g> </g> </g> </g> 

Notice that foreignObject comes after the rectangle, not inside it (as in your code). Also, notice that foreignObject does not work in IE: https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject