Question

我只是想问一个在jQuery中追加新元素的合适方法。在过去，我倾向于进行字符串连接，然后附加到div。但是，有时我的数据包含特殊字符（例如＆lt;＆gt;，％＆amp;等），这显然会破坏我的页面。经过一番研究，我发现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指出它实际上是一种可怕的方法。那么，有没有一种方法可以安全（文本全部编码）并实现最佳性能？

Answer 1

您可以考虑使用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

当然还有其他模板选项，其中大多数都提供比胡子（Handlebars，Hogan等）更多的功能。

Answer 2

IMO，您正在做正确的事情，以确保您没有编码问题。提高性能的一个好方法是将元素放在save()中，并且只能使用该数组调用Array。多个追加调用的主要性能影响是DOM可能必须在每次重新计算屏幕布局之后，这将减慢一切。

append

我还会内联任何不动态的HTML属性。例如，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);不是很有益;使用.addClass("image")将该属性内联起来会更快。

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

2 个答案: