使用 Jquery 添加大块 HTML

Question

我正在设计一个使用渐进增强的网站，并且还有一个移动版本。我想使用 jquery 将幻灯片添加到桌面站点，并想知道添加大量 HTML 的最佳方法。我打算添加的示例是：

<!-- Slideshow -->
<div class="scrollable">
<!-- "previous page" action -->
<a class="prev browse left"></a>   

<!-- root element for the items -->
<ul>
    <li>
        <img src="images/slideshow/image1.jpg" alt="image 1" title="image 1" />
    </li>

    <li>
        <img src="images/slideshow/image2.jpg" alt="image 2" title="image 2" />
    </li>

    <li>
        <img src="images/slideshow/image3.jpg" alt="image 3" title="image 3" />
    </li>

    <li>
        <img src="images/slideshow/image4.jpg" alt="image 4" title="image 4" />
    </li>

    <li>
        <img src="images/slideshow/image5.jpg" alt="image 5" title="image 5" />
    </li>
</ul>

<!-- "next page" action -->
<a class="next browse right"></a>

对于这样的事情，我会更好地使用附加或 HTML 方法吗？我还有另一个想法，我可以创建一个包含 HTML 的变量，并使用 JQuery 添加内容，但我已经尝试过但失败了（缺乏足够的知识！）。我将不胜感激任何建议。

Answer 1

您可以对任何类型的比较进行基准测试，如下所示：

function test( name, fn, n, next ) {

  var n = n || 100; // default number of runs
  var start, end, elapsed;

  setTimeout(function() { 
    start = Number(new Date());   
    for ( ; n--; ) {
      fn() 
    }
    end = Number(new Date());

    elapsed = end - start;

    // LOG THE RESULT
    // can be: $("#debug").html(name + ": " +  elapsed + " ms");
    console.log(name + ": " +  elapsed + " ms")); 

    next && next();
  }, 0);
}

test("append", function() {
  $("#elem").append( LARGE HTML );
});

test("html", function() {
  $("#elem").html( LARGE HTML );
});

我会尝试创建一个新元素并将其 html 设置为大块，然后将此元素附加到 dom。在我看来，它会更快，因为在应用 html 时，元素不可见，因此浏览器可以更快地工作，然后只需要向 DOM 附加一个元素。

查看实际效果。（点击预览）

（看起来html() 更快）

Answer 2

使用追加很好，但我希望只使用一次，或者尽可能少地使用它，并提前构建 HTML，将其保存在字符串变量中。

一般来说，实际上应该进行很少的 DOM 操作。仅当绝对必要时才应该以这种方式访问​​ DOM。
让我们看一下下面的示例：

var $myList = $("#myList");   

for (i=0; i<1000; i++){
    $myList.append("This is list item " + i);
}

此代码向 HTML 列表添加 1000 行。这是通过连续调用 1000 次 .append() 方法来完成的，因此对 DOM 进行了 1000 次操作。
以下代码是根据上面的示例进行修改的，演示了如何提高效率：

var $myList = $("#myList");
var li = "";   

for (i=0; i<1000; i++){
    li += "<li>This is list item " + i + "</li>";
}  

$myList.append(li);

请参阅以下文章：
http://www.jameswiseman.com /blog/2010/04/20/jquery-standards-2-dom-manipulation/

Answer 3

我会为整个块使用本机 innerHTML，这被证明是进行 DOM 操作的最快方法。请参阅此处的 f.ex： http://www.quirksmode.org/dom/innerhtml.html< /a>

<div id="container"></div>

<script>
var html = '<p>Some HTML</p>';
document.getElementById('container').innerHTML = html;
</script>