HTML element inside a SVG

HTML inside a SVG using foreignObject.

How to add a non-svg (html) element inside svg.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML inside SVG</title>
    <style type="text/css"></style></head>
    <body>
        <div>I'm a div inside the HTML</div>
        <svg width="500" height="300" style="border:1px red solid">
            <foreignobject class="node" x="46" y="22" width="100" height="100">
                
                    <div style="border:1px green solid">I'm a div inside a SVG.</div>                
            </foreignobject>
        </svg>
        <div>Interesting! But you a Foreign Object.</div>
    </body>
</html>
    