div에 문서 조각을 추가하는 방법

Question

이 간단한 코드가 있습니다. 이 ul html 목록을 "my-div"에 추가해야하지만이 코드를 추가 할 수는 없습니다. 어떤 생각이 잘못 됐습니까?

가능한 경우 jquery를 사용하여 fragment를 추가 하시겠습니까?

this.renderMenuTop = function() { 

     var menu, f, ul; 
     menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures']; 
     f = document.createDocumentFragment(); 
     ul = document.createElement('ul'); 
     for (var i = 0; i < menu.length; i++) { 
      var li = document.createElement('li') 
      li.id = menu[i]; 
      ul.appendChild(li); 
     }  
     document.getElementById("my-div").appendChild(f); 

     //$(this.elmMenuTop).append(f); 
    } 

Answer 1

아무 것도 넣지 마십시오. f. 하지만 문서 조각이있는 이유는 무엇입니까?

this.renderMenuTop = function() { 
    var menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures']; 
    var ul = document.createElement('ul'); 
    for (var i = 0; i < menu.length; i++) { 
     var li = document.createElement('li') 
     li.id = menu[i]; 
     ul.appendChild(li); 
    } 
    document.getElementById("my-div").appendChild(ul); 

    //$(this.elmMenuTop).append(f); 
}; 

다른 두 가지에 추가해야하는 경우 문서 조각이 도움이되지 않습니다.

Answer 2

당신은 당신의 문서 조각에 대한 요소를 추가하지 않습니다. 당신의 for 루프 후이 추가 :

f.appendChild(ul); 

또 다른 옵션은 단지 모두 단지 문서 조각을 덤프하는 것입니다

document.getElementById("my-div").appendChild(ul); 
//           ^^ Change from f to ul 

Answer 3

은 어디 조각에 목록을 추가하는 방법은 무엇입니까? div에 추가하기 전에

f.appendChild(ul); 

을 추가해야합니다. 또는 단편이없는 div에 바로 목록을 추가하십시오.

Answer 4

질문의 두 번째 부분에 대답하려면,이 jQuery를 함께 수도 있습니다 :

this.renderMenuTop = function() { 
    var menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures']; 
    var $ul = $('<ul></ul>'); 
    for (var i = 0; i < menu.length; i++) { 
     $ul.append('<li>' + menu[i] + '</li>'); 
    } 
    $('#my-div').append($ul); 
} 

문서 조각`에`ul`을 추가하지 않는