I am trying to create a SVG tag structure only when or after page loads.
This request may seem strange but this is needed since most of the html markup is generated by a compiled authoring software application so I can't tamper with it. I can only inject javascript to create additional assets (ex: Divs) as needed.
See below for markup. [Portions of html markup have been omitted for clarity.]
<html>
....
<script>
function run() {
var newSvg = document.getElementById('myDiv');
newSvg.outerHTML+='<svg style=position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em onclick=go() width=100 height=100><circle cx=400 cy=400 r=40 stroke=red stroke-width=4 fill=blue />';
}
</script>
<body>
....
<div id=myDiv></div>
....
<script>
run();
</script>
</body>
</html>
If I place the SVG markup in the destination location manually, page and SVG renders properly. If I try to create markup dynamically, I get nothing.
When I view html source after page loads there is no markup for the SVG which should have been created by the function.
I have tried doing via a <body onLoad=run()> event but it also does not work.
Note: This function has worked fine when I need to create a new DIV dynamically.
What am I doing wrong? Thanks in advance to all.
