append()를 사용하여 이전 내용을 대체하지 않습니다.

Question

첫째, div 컨테이너의 일부 내용을 Javascript의 html()을 사용하여 대체하려고했습니다. 이 접근법을 사용하는 문제는 배열의 마지막 값만 놓는 것입니다.

그래서 append()을 대신 사용했습니다. 그러나 그것은 내가 예상했던 것과 같이 작동하지 않습니다. 음, for 루프에 텍스트를 추가하지만 클릭 한 후에는 html()과 같은 이전 내용을 제거하지 않고 내용을 추가하기 만합니다. 여기

내가 그것을 구현하는 방법입니다

<div id="events-content"></div> 

// using Responsive Calendar js 

onMonthChange: function(events) { 
    for (var eventsDate in options.events) { 
     if (eventsDate.indexOf(monthKey) != -1) { 

      var monthEvents = options.events[eventsDate]; 

      for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) { 
       $('#events-content').append(
        '<p><b>' + eventsDate + ':</b> ' + 
        monthEvents.dayEvents[i].name + '<br/></p>'); 
      } 

     } 
    } 
}, 
... 

어떻게 자바 스크립트를 사용하여 이전에 추가 텍스트를 대체 할 수 있습니까?

내가 잘 Responsive Calendar JS

Answer 1

이 사용하고,이 같은 뭔가를 할 수 ... 루프에있는 모든 마크 업을 준비합니다.

var html = ""; 
for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) {   
      html += '<p><b>' + eventsDate + ':</b> ' + 
      monthEvents.dayEvents[i].name + '<br/></p>'; 
} 

$('#events-content').html(html); 

Answer 2

for 루프/추가 메커니즘 전에 html을 지우십시오.

사용 .empty()

onMonthChange: function(events) { 

    $('#events-content').empty() //or $('#events-content').html(''); 

    for (var eventsDate in options.events) { 
     if (eventsDate.indexOf(monthKey) != -1) { 

      var monthEvents = options.events[eventsDate]; 

      for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) { 
       $('#events-content').append(
        '<p><b>' + eventsDate + ':</b> ' + 
        monthEvents.dayEvents[i].name + '<br/></p>'); 
      } 

     } 
    } 
},