Jquery 从我的函数中删除HTML

使用JSON，我成功地将结果作为对象检索。经过一番努力，我终于使它发挥了作用。但是，我非常感谢任何帮助“清理”解决方案的人，因为我已经读到，作为最佳实践，您应该始终将HTML和jQuery分开

可在以下链接中找到代码片段：

var results=$.map（data.GSP.RES.R，函数（result）{
返回{
标题：result.T，
代码段：result.S，
url:result.U
};
}); //var结果
$。每个（结果、功能（索引、obj）{
$（'results'u holder'）。追加（''+''+obj.snippet+'
'）；
}); //每个

如果您经常这样做，我发现使用模板库非常有用。亲自使用handlebar.js。使标记与javascript分离变得非常简单

---

当然，您可以像这样运行自己的伪模板引擎：

通过添加隐藏模板：

<div id="templates" style="display:none;">
<h2><a></a></h2><p></p>
</div>

<div id="results_holder"></div>

---

将JS与HTML、CSS与HTML等分离是一个好主意，因为它忠实于分离函数、样式和表单等的实践

另一方面，时不时地用javascript创建一些元素并没有什么错，为了清理这些元素，我会：

var results = $.map(data.GSP.RES.R, function (result) {
    return {
        title  : result.T,
        snippet: result.S,
        url    : result.U
    };
});

$.each(results, function (index, obj) {
    var h2 = $('<h2 />'),
        a  = $('<a />', {text: obj.title, href: obj.url}),
        p  = $('<p />', {text: obj.snippet});

    $('#results_holder').append( h2.append(a), p );
});

---

因此，您正在寻找一种用于DOM操作的“干净”解决方案。清洁是一个相对的术语。我想你只是想要一些可维护的东西。如果HTML和Javascript不同步，处理它们会变得很麻烦。我不相信有一个单一的正确答案，但你肯定能找到适合你或你的团队需要的东西

我打算像joeframbach建议的那样建议一个.clone（），但我会使用整个DOM元素和一些子类，而不是单独复制元素。那么就不需要对底层元素或结构有任何了解

这是他的小提琴的我的分支：

---

JSFIDLE不起作用没有多大意义。在任何情况下，这更适合于如果您不打算使用jquery附加html，那么您的所有h2和p元素都应该已经存在，并且您必须使用jquery更改它们的属性和内部html。您当前的sol比这更好感谢所有的帮助人员，所有伟大的建议，我已经将我的“答案”标记为我实现的答案。再次感谢Hey，感谢您的回复，我使用了一个伪模板，但是，在重新提交搜索时，我在div上调用了一个.empty（），它也删除了模板，因此，由于我的知识有限，我试图找到另一个解决方案。嘿，是的，我研究了如何实现把手，但被要求除非绝对必要，否则不要给太多的图书馆打电话。谢谢你的推荐太好了，我感觉我和.map和.each在一起了

var data = [
    {T: 'foo1', S: 'bar1', U: 'bat1'},
    {T: 'foo2', S: 'bar2', U: 'bat2'},
    {T: 'foo3', S: 'bar3', U: 'bat3'},
    {T: 'foo4', S: 'bar4', U: 'bat4'},
    {T: 'foo5', S: 'bar5', U: 'bat5'},
]
var results = $.map(data, function (result) {
    return {
        title: result.T,
        snippet: result.S,
        url: result.U
    };

}); //var results

$.each(results, function (index, obj) {
    var tpl_h2 = $('#templates h2').clone();
    var tpl_p = $('#templates p').clone();
    tpl_h2.find('a').attr('href',obj.url).html(obj.title);
    tpl_p.html(obj.snippet);
    $('#results_holder').append(tpl_h2).append(tpl_p);
}); //each

var results = $.map(data.GSP.RES.R, function (result) {
    return {
        title  : result.T,
        snippet: result.S,
        url    : result.U
    };
});

$.each(results, function (index, obj) {
    var h2 = $('<h2 />'),
        a  = $('<a />', {text: obj.title, href: obj.url}),
        p  = $('<p />', {text: obj.snippet});

    $('#results_holder').append( h2.append(a), p );
});

$.each(data.GSP.RES.R, function (index, obj) {
    var h2 = $('<h2 />'),
        a  = $('<a />', {text: obj.T, href: obj.U}),
        p  = $('<p />', {text: obj.S});

    $('#results_holder').append( h2.append(a), p );
});

$.each(results, function (index, obj) {
    var tpl = $('#templates').clone();
    tpl.attr('id','unique'+index)
    tpl.find('.linkOne').attr('href',obj.url).html(obj.title);
    tpl.find('.one').html('unique'+index);
    tpl.find('.two').html(obj.snippet);
    tpl.removeClass('hidden')
    $('#results_holder').append(tpl);
}); //each