IE8でJavaScript経由で複数のVML要素を追加する

Question

IE 8で作業していますが、javascriptを使用して2つのVML楕円（A、B）をマイページに追加しようとしています。いずれの楕円も親DIVに追加されますが、私は2番目の楕円は描画されません。

私はappendChild（A）、appendChild（B）、楕円Aを描画し、Bは描画しません。 appendChild（B）、appendChild（A）の場合、楕円Bは描画され、Aは描画されません。

document.namespaces.add("v","urn:schemas-microsoft-com:vml"); 

this.container = Document.getElementById(mydiv); 

var grid2 = document.createElement("v:oval"); 
grid2.style.left= "300px"; 
grid2.style.top= "250px"; 
grid2.style.width= "25pt"; 
grid2.style.height= "75pt"; 
grid2.style.position="absolute"; 
grid2.style.behavior="url(#default#VML)"; 
grid2.style.display="inline-block"; 
grid2.setAttribute("fillcolor","#FF0000"); 
grid2.setAttribute("id", "marker2");  

var grid = document.createElement("v:oval"); 
grid.style.left="100px"; 
grid.style.top="100px"; 
grid.style.width="94pt"; 
grid.style.height="164pt"; 
grid.style.position="absolute"; 
grid.style.behavior="url(#default#VML)"; 
grid.style.display="inline-block"; 
grid.setAttribute("fillcolor","#0000FF"); 
grid.setAttribute("id", "marker"); 

this.container.appendChild(grid2); 
this.container.appendChild(grid); 

VMLを追加するトリックがありません。

私はIE 9で同じ結果を試しました。

企業ルールのため、会社内ではIEのみがサポートされていますが、多くのユーザーは引き続きIE8を使用しているため、現時点ではHTML5 Canvasを切り替えることはできません。任意の提案

Answer 1

ため

おかげで、2番目のノードを追加するdocumentFragmentを使用します。

document.namespaces.add("v","urn:schemas-microsoft-com:vml"); 

this.container = document.documentElement; 
var frag = document.createDocumentFragment(); 

var grid2 = document.createElement("v:oval"); 
grid2.style.left= "300px"; 
grid2.style.top= "250px"; 
grid2.style.width= "25pt"; 
grid2.style.height= "75pt"; 
grid2.style.position="absolute"; 
grid2.style.behavior="url(#default#VML)"; 
grid2.style.display="inline-block"; 
grid2.setAttribute("fillcolor","#FF0000"); 
grid2.setAttribute("id", "marker2");  

var grid = frag.appendChild(document.createElement("v:oval")); 
grid.style.left="300px"; 
grid.style.top="400px"; 
grid.style.width="94pt"; 
grid.style.height="164pt"; 
grid.style.position="absolute"; 
grid.style.behavior="url(#default#VML)"; 
grid.style.display="inline-block"; 
grid.setAttribute("fillcolor","#0000FF"); 
grid.setAttribute("id", "marker"); 

this.container.appendChild(frag); 
this.container.appendChild(grid2); 

Answer 2

私はIEに最初に追加されたVMLオブジェクトが正しくレンダリングされ、それ以降のものはなかった同様の問題と対処見るには小さすぎた。

このブログの記事では、IEはもうVMLのためのセット/のgetAttributeをサポートしていないことを決定するのに役立ちました：

http://louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/

それが動作しない/のgetAttributeを設定し、それでも属性を設定しないだけでなく、判明しますDOM要素（例えば、grid2.style.left = "300px"）上で直接動作しませんでした。

最終的には、各要素のすべてのマークアップを文字列として生成し、それを別の要素のinnerHTMLとしてDOMに挿入していました。

var html2 = "<v:oval style=\"left: 300px; top: 250px; width: 25pt; height: 75pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker2\"></v:oval>"; 
var html = "<v:oval style=\"left: 300px; top: 400px; width: 94pt; height: 164pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker\"></v:oval>"; 

someNode.innerHTML = html2; 
someNode2.innerHTML = html; 

私はVMLをホストするために使用されるダミーノードを作った：innerHTMLの設定、所望の親、繰り返しに移動。

醜いですが、うまくいきました！