Question

我有一个按钮，使用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>');

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

以干净的方式做到这一点的最佳方式是什么？

Answer 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();

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

Answer 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);

Answer 3

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

弃用

Answer 4

我正在做的方式如下所示。我不确定你是否应该创造这么多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

干杯，

Answer 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>

Answer 6

你可以像DanielB建议的那样使用jQuery模板，你的代码看起来更干净，而且可能更容易维护，但考虑在应用程序中添加另一个处于测试模式的脚本。值得吗？

我这样工作，如果HTML必须是通过jQuery动态的，或者它是像<div>Hello</div>这样的小块代码，我会使用selector.append（）。

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

对我而言，接下来应该对HTML做些什么。

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

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

6 个答案: