자바 스크립트 - 업데이트 된 HTML 만 렌더링

Question

나는 render라는 클래스가 있습니다. 계속해서 업데이트되며 매번 전체 클래스를 업데이트하지 않습니다.

내가 문자열을

var html1 = "<h1>Header</h1><p>this is a small paragraph</p><ul><li>list element 1.</li><li>list element 2.</li><li>list element 3.</li></ul>" 

및 $('.render').html(html1)는 생산 :

<div class="render"> 
    <h1>Header</h1> 
    <p>this is a small paragraph</p> 
    <ul> 
     <li>list element 1.</li> 
     <li>list element 2.</li> 
     <li>list element 3.</li> 
    </ul> 
</div> 

내가 html1

var html2 = 
"<h1>Header</h1> 
<p>this is a small paragraph</p> 
<ul> 
<li>list element 1.</li> 
<li>list element 2.</li> 
<li>list element 3. With a small update.</li> 
</ul>" 
// newlines thrown in for clarity. 

인가 단지 업데이트입니다 새 HTML 문자열을 얻을 말할 수 있습니다 새 HTML을 다시 렌더링하지 않고도 삽입 할 수있는 좋은 방법이 있습니다. 모든 것. 여기

이 작동합니다 같이이 문제를 github/rontgen.js

Answer 1

뭔가를 해결하려고 내 프로젝트 (구문이 꺼져있을 수 있지만, 이것은 당신에게 그것을 수행하는 방법에 대한 아이디어를 제공해야합니다) 너무 좋아

$('.render').children().each(function() { 
    if ($(this).is('h1') && $(this).html() != html2.find('h1').html()) { 
     $(this).html(html2.find('h1').html()); 
    } 

else if ($(this).is('p') && $(this).html() != html2.find('p').html()) { 
     $(this).html(html2.find('p').html()); 
} 

else if ($(this).is('ul') && $(this).html() != html2.find('ul').html()) { 
    for (i=0; i<$(this).children('li').length; i++) { 
     if ($(this).children('li')[i] != html2.find('ul').children('li')[i]) { 
      $(this).children('li')[i].html(html2.find('ul').children('li')[i].html()); 
    } 
    } 
    } 
}); 

Answer 2

을 내 예비 해결책은 다음과 같다. @ dave가 위와 같지만, 나는 dom을 가로 지르지 않는다. 여전히에만 삽입하지 않고 다시 렌더링,하지만 몇 가지 기이 내가 한 번에 두 개 이상의 행을 삭제하면 때문에

$(function(){ 

    // Cache the jQuery selectors 
    var $editor = $("#editor"); 
    var $render = $('.render'); 

    $editor.focus(); 
    var firstTime = true; 
    var cache = ['']; 

    var i = 0; 
    var row_num = 1000; 
    for(i = 0; i < row_num; i++){ 
     $render.append('<div id="node'+i+'"></div>') 
    } 

    $editor.keyup(function(){ 
     var fresh = $editor.val().split('\n\n'); 

     var i = 0; 
     for(i = 0; i < fresh.length; i++){ 
      console.log(fresh[i]!==cache[i]) 
      if(fresh[i]!==cache[i]){ 
       $('#node'+i).html(marked(fresh[i])) 
       renderMathJax('node'+i) 
      } 
     } 
     var j; 
     for(j = fresh.length; j < row_num; j++){ 
      $('#node'+j).empty() 
     } 

     cache = fresh; 

    }); 

}); 


var renderMathJax = function (el) { 
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,el]); 
} 

그 성능이 좋다.