HTML 문자열 동적 생성 노드

1.innerHTML

var div = document.createElement('div'),
	fragment = document.createDocumentFragment(),
	str = '<div><h1>11</h1><ul><li>1</li><li>2</li></ul></div>',
	node;
div.innerHTML = str;
while((node = div.firstChild)){
	fragment.appendChild(node);
}

div.innerHTML을 통해 노드를 추출한 다음 문서 조각으로 옮긴 다음 insertBefore와 appendChild로 노드를 삽입합니다.
주의: IE의col,colgroup,frameset,html,head,style,title,table,tbody,tfoot,thead,tr의 innerHTML 속성은 읽기만 합니다
2.createContextualFragment

var range = document.createRange(),
	str = '<div><h1>11</h1><ul><li>1</li><li>2</li></ul></div>';
range.selectNodeContents(document.documentElement);
var fragment = range.createContextualFragment(str);

innerHTML 방식은 여분의div 요소를 변환기로 만든 다음createDocumentFragment로 문서 조각을 만들어서 모든 노드를 옮겨야 합니다.createContextualFragment를 사용하면 이 단계를 피할 수 있습니다.
그러나 성능으로 볼 때 크롬과 FF5에서는 첫 번째 방식이 더 빠르고,opera와safari에서는 두 번째 방식이 더 빠르다.
그러나 만약에 만들어야 할 요소가 간단한 일 뿐이라면 제 테스트 결과는 1-2개의 요소일 때createElement+createTextNode로 조금 빠르고 2개의 요소보다 크면 상술한 방법의 장점이 더욱 뚜렷해집니다.