문서에서 요소 가져 오기 및 하위 요소 추가

Question

DOM 계층 구조에 item-group-button이라는 요소 집합이 있습니다. 위의 지정된 요소를 가져오고 요소의 내부 HTML에 새 내용을 추가하려면 다음 jQuery 코드를 사용합니다.

function getMajorGroups(){ 
    var element = $(".item-group-button"); 
    $.get("http://localhost:9157/getAllMajorGroups", function(data){ 
     if(data.majorGroups.length != 0){ 
      $('.panel_list').empty(); 

     } 
     for(var i = 0; i < data.majorGroups.length; i++){ 
      element[i].appendChild("<h3>" + data.majorGroups[i] + "</h3>"); 
      $('.panel_list').append(element); 
     } 
    }); 
} 

요소 코드는 다음과 같습니다.

그러나 코드를 실행하면 요소가 지워지지 않고 새 콘텐츠에 현재 콘텐츠가 추가됩니다.

내가하려는 것은 웹 서비스에 연결하고받은 데이터에 따라 html 요소를 채 웁니다. 어떤 사람이라도 더 좋은 제안이 있으면 저를 계몽하십시오!

감사합니다.

Answer 1

해야한다.

function getMajorGroups(){ 
    var element = $(".item-group-button"); 
    $.get("http://localhost:9157/getAllMajorGroups", function(data){ 
    if(data.majorGroups.length != 0){ 
     $('.panel_list').empty(); 
    } 
    for(var i = 0; i < data.majorGroups.length; i++){ 
     var clone = element.clone(); 
     clone.append("<h3>" + data.majorGroups[i] + "</h3>"); 
     $('.panel_list').append(clone); 
    } 
    }); 
} 

Answer 2

콘솔에서 오류가 발생해야하며, jquery에는 appendChild이 없습니다.

$('.panel_list').appendChild(element);

, 당신은 몇 가지 중복 값을 생산, 또 다시 element를 추가하는 당신 때문에 내가 당신의 코드에서 보는 것과 .clone()를 사용한다고 생각

$('.panel_list').append(element);