write fragment

처음에는 자바스크립트의 문자열을 "template element"로 만들려고 했다.
자바스크립트 문자열을 "template element" 대신 fragment로 만들어도 충분 할것 같다는 생각이 들었다.

fragment에서 innerHTML 사용하기

fragment에서는 innerHTML을 사용 할수 없다.
div.innerHTML로 읽은후에 부모를 fragment로 바꾸면 된다.

function writeFragment(parentElement, childString) {
    let frag = document.createDocumentFragment();
    let divEl = document.createElement('div');
    divEl.innerHTML = childString;

    while(divEl.children.length) {
        frag.appendChild(divEl.children[0]);
    }

    parentElement.appendChild(frag);
}

let temp =
`<div>사는 넷이다</div>
<div>오는 다섯이다</div>`;

writeFragment(document.body, temp);

fragment clone 하기

fragment가 이미 있으면 존재하는 fragment를 리턴한다.
없으면 fragment를 생성한다.

let getFragment = (function (childString, fragId) {
    let fragList = [];

    return function(childString, fragId) {
        if(fragList[fragId]) {
            console.log(fragId, '프래그먼트가 있습니다.');
            return fragList[fragId];
        }

        let frag = document.createDocumentFragment();
        let divEl = document.createElement('div');
        divEl.innerHTML = childString;

        while(divEl.children.length) {
            frag.appendChild(divEl.children[0]);
        }

        fragList[fragId] = frag;
        console.log(fragId, '추가');
        return fragList[fragId];
    }
})();

document.body.appendChild(frag.cloneNode(true));

다운로드 : fragment_write.html

참조)
http://programmer-seva.tistory.com/60