用jQuery追加新元素的安全方法是什么?

What is the safe way to append new elements with jQuery?

本文关键字：安全 方法 是什么 元素 追加 jQuery 新元素      更新时间：2023-09-26

我只是想问一种合适的方法来添加jQuery中的新元素。在过去，我倾向于做字符串连接，然后追加到一个div。然而，有时我的数据包含特殊字符(如<>， %&等)，这显然破坏了我的页面。经过一番研究，我发现jQuery .text()确实提供了自动编码。我认为先创建jQuery对象，然后追加会更安全。我的代码看起来像这样:

$.each(data.items, function(index, photo) {
            var $imageSpan = $("<span></span>").addClass("image");
            var $anchorTag = $("<a></a>").prop("href", photo.link);
            $("<img/>").prop("src", photo.media.m.replace("_m", "_o")).appendTo($anchorTag);
            $anchorTag.appendTo($imageSpan);
            $photoDiv.append($imageSpan);
        });

然而，这个页面:http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly指出这实际上是一个可怕的方法。那么，有没有一种既安全(文本都是编码的)又能实现最佳性能的方法呢?

在我看来，你是在做正确的事情，以确保你没有编码问题。提高性能的一个好方法是将元素放在一个Array中，并且对该数组只调用一次append。多次追加调用对性能的主要影响是DOM可能不得不在每次调用后重新计算屏幕的布局，这将减慢一切。

var photos = [];
$.each(data.items, function(index, photo) {
  var $imageSpan = $("<span></span>").addClass("image");
  var $anchorTag = $("<a></a>").prop("href", photo.link);
  $("<img/>").prop("src", photo.media.m.replace("_m", "_o")).appendTo($anchorTag);
  $anchorTag.appendTo($imageSpan);
  photos.push($imageSpan);
});
$photoDiv.append(photos);

我也会内联任何不是动态的HTML属性。例如，.addClass("image")不是很有益;使用$('<span class="image"></span>')将该属性内联会更快。

您可以考虑使用Mustache。我还没有做任何基准测试，但性能应该不错。不过，最主要的是，它使它非常容易维护，并且它处理html编码被替换的值。

var template = "{{#Images}}<span class='image'><a href='{{Href}}'><img src='{{Src}}'></a></span>{{/Images}}";
var model = {
  Images: [
    { Href: "http://www.example.com", Src: "myImage1.png" },
    { Href: "http://www.example.com", Src: "myImage2.png" },
  ]
};
$("#photos").html(Mustache.render(template, model));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js"></script>
<div id="photos"></div>

Mustache的语法非常简单:http://mustache.github.io/mustache.5.html

当然还有其他模板选项，其中大多数提供比mustache (Handlebars, Hogan等)更多的功能。

相关文章：