Javascript 基于数组中的数据创建dom元素的干净方法？

我有一个数组，其中充满了具有相同键但值不同的对象。这些对象需要转换为具有各种子元素的div。下面的代码可以工作，但看起来很混乱，很难维护

pim.buildProducts=函数（数组）{
//对于数组中的每个项
productHTML=''；
compareBoxHTML=''+
“比较”+
'';
对于（i=0；i

有没有更好的方法，或者其他我可以选择的方法

谢谢！

---

Walter

查看函数和所有其他DOM处理方法

您可以使用

document.createElement

和其他DOM方法，而不是编写HTML，但这可能比使用HTML字符串更详细

另一个选择是使用lodash提供的模板函数，这将使HTML更干净

JS变成：

pim.buildProducts = function(array) {
  var tplHtml = document.getElementById('productsTpl').innerHTML;
  var tpl = _.template(tplHtml);
  return tpl({ products: array });
}

您可以将模板放入HTML文件中：

<script type="text/template" id="productsTpl">
  <% products.forEach(function(item) { %>   
  <div class="product">
    <div class="image">
      <a href="<%= item.url %>">
        <img src="<%= item.image %>" />
      </a>
    </div>
    <div class="desc">
      <h4><a href="<%= item.image %>"><%= item.id %></a></h4>
      <h5><%= item.description %></h5>
      <div class="pim-icons">
        <a class="cart" href="<%= item.url %>">
          <span class="glyphicon glyphicon-shopping-cart"></span>
        </a>
        <% if (item.catalog) { %>
        <a class="file" href="<%= item.catalog %>">
          <span class="glyphicon glyphicon-file"></span>
        </a>
        <% } %>
      </div>
    </div>
  </div>
  <% }) %>
</script>

---

据我所知，这是最干净的方法

首先，您应该像这样创建所有html

    <div hidden="hidden" id="mainDiv">
    <div class="checkbox compare">   
    <label data-placement="right" data-toggle="tooltip" title="Add to Compare">
        <span class="compare-text">Compare</span>
        <input type="checkbox" value="compare">
    </label>
</div>
<div class="image">
    <a href="">
        <img src="">
    </a>
</div>
</div>

比较

在此之后，您应该隐藏父div，并将其克隆到具有的对象。之后，您只需简单地更改元素的值，如

    <script>
function fillData(array)
{
    for(var i ; i<array.length;i++)
    {
        var element = $("#mainDiv").clone();
        element.attr("hidden","");
        element.find("img").attr("id",array[i].url);
        $(document).append(element);
    }
}
</script>

函数fillData（数组）
{
对于（var i；iI没有否决，但可能是因为您没有展示如何根据他的需要使用它。哦，感谢您的澄清。我添加了一个完整的Lodash示例。我认为对任何复杂的对象使用DOM方法都会像原始字符串连接解决方案一样繁琐。感谢您的回答。我没有使用它，也没有使用任何o这是目前的答案，但这为我未来的项目指明了正确的方向。虽然它看起来“更干净”要使用Javascript函数构建DOM元素，这不一定是提高性能的最佳方法。浏览器具有高度优化的HTML解析器，而从JS执行大量增量DOM更新可能会非常慢。如果要使用
createElement
，请确保先将节点添加到
docfrag
，然后添加DOM的碎片。@Barmar这就是我最初使用此方法的原因。当处理数百个元素时，它似乎更好（性能方面）一次输出它们，而不是一个一个地创建它们。谢谢你的建议-克隆的使用非常聪明！我并不总是使用Jquery，但我工作的大多数项目都有它。我最终没有使用这个答案（或任何其他答案），但我会在未来的项目中记住它。如果可以的话，我会投赞成票。