javascript create html <object> for svg

Question

i want to do this:

<object type="image/svg+xml" id="tornado5" data="bitmaps/tornado2.svg">
</object>

but i want to do it in javascript dynamically... i tried:

var object2 = document.createElement("object");
object2.type = "image/svg+xml";
object2.data = 'bitmaps/tornado2.svg';
object2.id = "tornado5";
document.getElementById('objLayer').appendChild(object2);  // no .onload method

var ele=document.getElementById("tornado5");
var links = ele.contentDocument.getElementsByClassName('myClass'); //paths in file use
for (var i=0;i<links.length;i++){ links[i].style.fill="#00ff00"; } 

the top html way can call the 3-line-js-color-mod at bottom and it will mod the color of the svg. But if i load the svg the js way, the svg loads, but the color mod wont work. (you can't mod the contentDocument thru an img, only thru an object i'm told).

question 11374059 asks a similar question and he was told to use img. No good here.

Answer 1

I suggest using Object.setAttribute(attr, val); on object tag. ie:

var object2 = document.createElement("object");
object2.setAttribute("type", "image/svg+xml");