title: dynamically create object tags in javascript
body: <p>I am wondering why the following code does not create two of my activex object. When the object tag is directly in the HTML it works fine, but for the life of me I can't dynamically create the object item. Is this a security issue or something? I am finding a difficult time finding documentation on this problem.  </p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InkWebForm._Default" %&gt;    
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;         
         &lt;script language="javascript"&gt;
  
             window.onload = function() {
                 var s = '&lt;OBJECT id="inkImage" classid="InkControls.dll#InkControls.ResizableInk" VIEWASTEXT&gt;&lt;/OBJECT&gt;';
                 document.getElementById("inkHolder").innerHTML = s;
             };  
         &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;    
      &lt;!-- This one gets created --&gt;
      &lt;OBJECT id="inkImage2" classid="InkControls.dll#InkControls.ResizableInk" VIEWASTEXT&gt;
      &lt;/OBJECT&gt;        
  
      &lt;!-- this one should get inserted but never gets created --&gt;
      &lt;div id="inkHolder"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Well when I explore the dom the object explorer does show the item but IE renders a little square box and not the activex control.</p>
  
  <p>Here goes the second attempt based on casablanca's suggestion. I think there might be a security issue going on here as per your suggestion this should work but does not. Same problem.</p>
  
  <pre><code>    &lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InkWebForm._Default" %&gt;
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head runat="server"&gt;       
         &lt;script language="javascript"&gt;
  
             window.onload = function() {
  
                 var obj = document.createElement('object');
                 obj.setAttribute('id', 'inkImage');
                 obj.setAttribute('classid', 'InkControls.dll#InkControls.ResizableInk');             
                 document.getElementById('inkHolder').appendChild(obj);
             };  
         &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
       &lt;OBJECT id="inkImage2" classid="InkControls.dll#InkControls.ResizableInk"&gt;
      &lt;/OBJECT&gt;   
  
      &lt;div id="inkHolder"&gt;&lt;/div&gt;    
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>