IE8에서 JavaScript를 통해 여러 VML 요소 추가하기

Question

IE 8로 작업하면서 javascript를 통해 내 페이지에 두 개의 VML 타원 (A, B)을 추가하려고합니다. 어느 쪽의 타원도 부모 DIV에 추가되지만 두 번째는 렌더링되지 않습니다.

내가 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 캔버스를 전환 할 수 없습니다. 어떤 제안

Answer 1

사용하십시오 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

내가 처음 VML 개체가 제대로 렌더링 IE에 추가 ​​유사한 문제 처리

을하지만, 이후의 것들이었다 너무 작아서 보지 못했다.

이 블로그 기사는 더 이상 VML을 위해 IE 설정을 지원하지 않는 /의 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")에서 직접 작동하지 않았습니다.

궁극적으로, 각 요소의 모든 마크 업을 문자열로 생성하여 DOM의 다른 요소의 innerHTML로 설정하여 삽입하는 것이 효과적이었습니다. 그리고, 설정 innerHTML을 원하는 상위로 이동 반복 :

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; 

는 I 내가 VML을 호스팅하는 데 더미 노드했다.

미운하지만 작동했습니다!