문서 작성 원인 디자인 결함

Question

슬라이더 기능을 씁니다. 슬라이더 기능의 가치에 기초하여 내 문서에서 일부 메시지를 인쇄합니다. 내가 스타일을 사용하지 않고 메시지를 인쇄하는 슬라이더 값을 변경 한 후에 슬라이더 안에서 DW를 사용할 때. 어떻게 해결할 수 있습니까?

 $(function() { 
     $("#slider-5").slider({ 
      range:true, 
      min: parseInt(ctime[0]), 
      max: parseInt(ctime[ctime.length-1]), 
      values: [ parseInt(ctime[4]),parseInt(ctime[len])], 

      change: function(event, ui) { 
       $("#slidevalue") 
       .val("$" + formatDateTime(ui.values[ 0 ]) + " - $" + formatDateTime(ui.values[ 1 ])); 
       new_var=ui.values[0]; 
    document.write('<section id="cd-timeline" class="cd-container">') 
    var ctime = <?php echo json_encode($tweettimes); ?>; 


    for(var x=0; x<10; x++){ 
    var datum = new Date(parseInt(ctime[x])); 
    document.write('<div class="cd-timeline-block">') 
    document.write('<div class="cd-timeline-img cd-location">') 
    document.write('<img src="img/cd-icon-location.svg" alt="Location">') 
    document.write('</div>') 
    document.write('<div class="cd-timeline-content">') 
    document.write('<h2>'+(x+1)+'</h2>') 
    document.write('<p>'+<?php echo json_encode($content); ?>[x]+'</p>') 

    document.write('<span class="cd-date">'+formatDateTime(datum)+'</span>') 
    document.write('</div>') 
    document.write('</div>')} 
    document.write('</section>') 
      } 
     }); 
    }); 

Answer 1

document.write을 사용하지 마십시오. 대신 document.createElement()을 사용하십시오.

var body = document.getElementsByTagName('body')[0]; 

var section = document.createElement('section'); 
section.id = 'cd-timeline'; 
section.className = 'cd-container'; 
body.appendChild(section); 

for (var x = 0; x < 10; x++) { 
    var datum = new Date(parseInt(ctime[x])); 

    var outerDiv = document.createElement('div'); 
    outerDiv.className = 'cd-timeline-block'; 
    section.appendChild(outerDiv); 

    var div = document.createElement('div'); 
    div.className = 'cd-timeline-img cd-location'; 
    outerDiv.appendChild(div); 

    var img = document.createElement('img'); 
    img.src = 'img/cd-icon-location.svg'; 
    img.setAttribute('alt', 'Location'); 
    div.appendChild(img); 

    var div = document.createElement('div'); 
    div.className = 'cd-timeline-content'; 
    outerDiv.appendChild(div); 

    var h2 = document.createElement('h2'); 
    div.appendChild(h2); 
    h2_text = document.createTextNode('foo'); 
    h2.appendChild(h2_text); 

    var p = document.createElement('p'); 
    div.appendChild(p); 
    p_text = document.createTextNode('bar'); 
    p.appendChild(p_text); 

    var span = document.createElement('span'); 
    span.className = 'cd-date'; 
    div.appendChild(span); 
    span_text = document.createTextNode('foobar'); 
    span.appendChild(span_text); 
} 

DEMO