如何将Javascript/JQuery与HTML分离？

假设我有一个div，它使用AJAX检索价格和产品信息，并将新产品附加到当前结果中

<div id="product">
<div class="label">Price: <div class="price">$10.90</div></div>
<div class="label">Sales Price: <div class="price">$9.90</div></div>
</div>

价格:$10.90
售价:$9.90

我可以做到： 1） 只获取价格和数据。然后迭代这些结果，让Javascript为每个产品动态创建div

这个问题：如果div的HTML结构发生了变化（比如说price的类发生了变化），我可能需要在两个地方进行更改。在静态HTML以及Javascript中

2） 还是让服务器返回实际的HTML以附加到页面上更好？但是这不是很混乱吗？因为设计与业务逻辑没有分离，而且实际的HTML结构可能会改变

---

或者我缺少第三种选择吗？

您应该让javascript在接收数据时创建div。通过让javascript获取整个HTML结构和价格，你加载的信息比你自己加载价格并让JS进行输出要多

---

快乐编程。

你可能想考虑JavaScript模板。退房

您可以将JSON从AJAX调用传回，然后让模板来完成繁重的工作。这样，您只有一个地方可以更改HTML中的类

---

快乐编码

您在页面中看到的只是演示文稿，浏览器只是一个显示设备。所有的表示逻辑都应该一次到位，因此如果服务器正在生成显示（通常情况下），那么就在那里生成标记并将其插入客户端

如果您想使用脚本在客户端访问页面中的数据，那么在保存数据的元素上使用合适的类或ID，这样脚本就可以在不需要知道文档布局的情况下找到数据

如果您只是更新客户机上的数据，请使用相同的策略—将值传递给脚本，然后使用类或ID（或其他）确定要更新的元素

---

如果您同时在服务器和客户机上进行演示，通常在某些内容发生变化时必须同时更新这两个内容。

您可以在HTML中使用类似div的空白占位符，当没有详细信息时，div可以隐藏。 AJAX调用完成后，可以将包含标题和详细信息的结构动态添加到占位符中。

---

如果结构发生变化，您只需要更改JavaScript。

您可以使用java脚本端模板-有很多库。我会推荐你看看。我相信也有工作正在进行

您还可以阅读Rick Strahl的经验以及各种模板库

---

尽管基于java脚本的模板是解决您的问题的优雅解决方案，但如果您必须支持禁用java脚本的场景，那么您的选项#2是一个不错的选择。通常，您使用服务器端模板为第一个请求以及ajax请求生成html（因此html结构只在一个地方维护，即服务器端模板）。当然，在禁用js的场景中，ajax调用将成为常规POST请求

假设您控制输出数据的服务器，您可以轻松地按如下方式构造数据：

<div id="product" data-price="$10.90" data-sales-price="$9.90">
    other markup here
</div>

这里还有其他标记

任何带有“data”前缀的任意HTML属性都可以正常验证

看看.js和。