HTML 문자열 동적 생성 노드
1323 단어 html
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에서는 두 번째 방식이 더 빠르다.
그러나 만약에 만들어야 할 요소가 간단한
111
일 뿐이라면 제 테스트 결과는 1-2개의 요소일 때createElement+createTextNode로 조금 빠르고 2개의 요소보다 크면 상술한 방법의 장점이 더욱 뚜렷해집니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
