从jQuery的页面上插入“复杂”元素的最佳方法是什么答案

【问题标题】：What is the best way to insert a "complex" element on a page from jQuery从jQuery的页面上插入“复杂”元素的最佳方法是什么
【发布时间】：2011-09-15 07:59:01
【问题描述】：

我有一个按钮，它使用 ajax 从服务器获取一些数据，完成后，它应该向 DOM 添加一个元素。

要添加的元素是这样的

<div class="SomeClass">
  <div class="SomeOtherClass">
    <span class="Name">name from server</span>
    <span class="Manufacturer">manufacturer from server</span>
  </div>
  <span class="Weight">weight from server</span>
</div>'

在我从服务器获取数据的 jQuery 函数中，创建此结构的最佳方法是什么，将来自服务器的数据（名称、制造商和重量）放在正确的位置，并将其放入DOM。我让它像这样工作：

$("#ItemList").append('<div class="SomeClass"><div class="SomeOtherClass"><span class="Name">' + value.name + '</span><span class="Manufacturer">' + value.manufacturer + '</span></div> ' +
                       '<span class="Weight">' + value.weight + '</span></div>');

但这看起来不太好，而且很难看到正确的结构。

以干净的方式执行此操作的最佳方法是什么？

【问题讨论】：

使用aefxx.com/jquery-plugins/jqote插件。它比 jquery 模板插件更快。使客户端模板变得容易。

标签： jquery dom

【解决方案1】：

如果我需要结构的多个“版本”，我会添加类似的东西

<div class="SomeClass" id='SomeClassTemplate' style='display:none'>
   <div class="SomeOtherClass">
      <span class="Name">name from server</span>
      <span class="Manufacturer">manufacturer from server</span>
   </div>
   <span class="Weight">weight from server</span>
</div>

在我的 html 正文的底部，然后在我要添加元素的事件处理程序中，我会这样做

var newDiv = $("#SomeClassTemplate").clone();
newDiv.attr("id","whatever") 
// remember this id should be different for each instance. or you can remove it
.appendTo("whatever") // depends on where in DOM you want to insert it
.find(".name").html("My name");

newDiv.find('.manufacturer').html("my manufacturer);
newDiv.show();

我发现这种方法的优点是可以通过调整选择器轻松修改代码，以防结构发生变化。

【讨论】：

+1：我最终使用了这个的变体。要插入的元素的 html 变得非常干净，易于可视化和更改。
只有当我知道 ill use this DOM in my page, ill 已经将它集成到模板中，然后填充内容。在很多情况下，我会根据条件注入内容，而这种方法并不适合我的需求。

【解决方案2】：

如果您想牢记可读性，那么以下方法既干净又不执行任何不必要的 jQuery 查找来添加内容。

var div = '<div class="someClass">' +
          '    <div class="SomeOtherClass">' +
          '        <span class="Name">' + value.name + '</span>' +
          '        <span class="Manufacturer">' + value.manufacturer + '</span>' +
          '    </div>' +
          '    <span class="Weight">' + value.weight + '</span>' +
          '</div>';

$('#itemList').append(div);

【讨论】：

我更喜欢你的方法，不过如果能在代码中看到颜色就好了：P

【解决方案3】：

我正在做的方式如下所示。我不确定你是否应该创建这么多 div，但它对我来说效果很好。

var div1 = $('<div class="colwrap_fof"></div>');        //THE COMPLEX DIV ITSELF
var div2 = $('<div class="homeimg"></div>');                
var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>');
var div22 = $('<div id="frontImageDiv'+fof_index+'"  class="frontDiv"></div>');
div2.append(div21);
div2.append(div22);
div1.append(div2);
$("#df_background").append(div1);     // ADDING the complex div to the right place

干杯，

【讨论】：

【解决方案4】：

您可以使用jQuery template plugin。但如果这是“最好”的方式，我不能说。使用模板需要更多的处理时间，但代码更具可读性。你必须权衡你的具体任务。但请注意，根据Recommended JavaScript HTML template library for JQuery?，它现在已被弃用

【讨论】：

【解决方案5】：

也许你可以试试jQuery Templates？

它仍处于测试阶段，但我相信它已被广泛使用。

（示例来自文档）

<!DOCTYPE html>
<html>
<head>
  <style>
table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; }
table td { border:1px solid blue; padding:3px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>

<button id="showBtn">Show movies</button><br/>
<table><tbody id="movieList"></tbody></table>

<script>
  var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

var markup = "<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"

/* Compile markup string as a named template */
$.template( "movieTemplate", markup );

/* Render the named template */
$( "#showBtn" ).click( function() {
  $( "#movieList" ).empty();
  $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
});
</script>

</body>
</html>

【讨论】：

【解决方案6】：

您可以按照 DanielB 的建议使用 jQuery 模板，您的代码会看起来更简洁，*可能更易于维护，但请考虑在您的应用程序中添加另一个处于 beta 模式的脚本。值得吗？

我是这样工作的，如果 HTML 必须通过 jQuery 进行动态处理，或者是像 <div>Hello</div> 这样的一小段代码，我会使用 selector.append()。

如果它是您的示例中的 HTML 代码，我会坚持将其保留在 HTML 页面上。

对我来说，接下来你应该如何处理 HTML 确实是一个问题。

例如，我一直在我一直在开发的在线聊天应用程序中使用 jQuery 模板，这实际上帮助我进行了维护。

【讨论】：