Javascript - визуализировать только обновленный html

У меня есть класс под названием render. Это постоянно обновляется, и я бы хотел не обновлять весь класс каждый раз.Javascript - визуализировать только обновленный html

У меня есть строка

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>

Позволяет сказать, что я получаю новый HTML строку, которая является всего лишь обновление 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 без повторной рендеринга Все это.

Вот мой проект, чтобы попытаться решить эту проблему github/rontgen.js

источник

2013-04-15 Eoin Murray

'Node.appendChild' https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild – Oleg

Не совсем (если вы не хотите писать свой собственный' diff', который исправляет только те элементы, которые меняются). – Blender

Это зависит от того, что вы подразумеваете под «хорошим способом». Вы можете, конечно, написать код для этого, но это, вероятно, не простая задача. – Pointy

Что-то, как это должно работать (синтаксис может быть выключен, но это должно дать вам представление о том, как это сделать)

$('.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()); 
    } 
    } 
    } 
});

источник

2013-04-15 21:20:10 dave

ИТАК предварительное мое решение заключается в следующем: его, как @ dave, выше, но я не пересекаю дом.

$(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]); 
}

Его производительность хорошо, потому что это только вставки и повторно не оказывают, но еще несколько странности, если я удалю более одной строки за один раз.

источник

2013-04-16 21:50:34

Javascript - визуализировать только обновленный html

ответ

Смежные вопросы