Javascript-仅呈现更新的html

我有一个叫做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>"

假设我得到一个新的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.

var html2=
“标题
这是一小段


列出要素1
列出要素2
列出元素3。有一个小的更新
”
//为了清晰起见，添加了新行。

有没有一个好方法可以让我插入新的html而不必重新呈现整个内容

---

下面是我尝试解决这个问题的项目

类似的方法应该可以奏效（语法可能不正确，但这应该会让您知道如何做）

$（'.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（））{
对于（i=0；iOk），我的初步解决方案如下，就像上面的@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]);
} 

$（函数（）{
//缓存jQuery选择器
var$editor=$（“#editor”）；
变量$render=$（'.render'）；
$editor.focus（）；
var firstTime=true；
var cache=['']；
var i=0；
变量行数=1000；
对于（i=0；i

它的性能很好，因为它只插入，不重新渲染，但是如果我一次删除多行，它仍然有一些奇怪的地方。
Node.appendChild
不是真的（除非你想编写自己的
diff
，只修补那些更改的元素）。这取决于你所说的“好方法”是什么意思。您当然可以编写一些代码来执行此操作，但这可能不是一项简单的任务。您可以使用jQuery在所有子元素之间循环，并检查是否有任何更改，如果子元素有更改，则只替换该子元素的内容。鉴于您项目的存在原因：“大多数…每次文档更改时重新呈现整个文档”和“本项目的重点是找到一种优雅的方法来解决这个问题，只重新呈现文档的更新部分。”也许更具体的问题应该是“有没有一种快速插入新html的方法？”“。对于中小型更改，如果您能够找到一种方法来“区分”HTML并以比更新整个文档更快的速度更新，那么您将获得性能优势，否则？不会。
$('.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());
     }
   }
  }
});

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