如何在html/javascript中将具有某些类的div添加到另一个div（彼此内部）

我想通过单击html/view中的category从数据库中列出我的产品。 首先，我在HTML静态中创建它只是为了检查它的外观，它看起来像这样：

这是我的html：

 <div class="col-md-8" style="margin-top: -15px;">

        <div  class="products row">

            <div class="col-md-3">
                <div class="product-holder">
                    <img class="img-responsive" src="images/coke.png">
                    <p class="product-title">
                        Product no1
                    </p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="product-holder">
                    <img class="img-responsive" src="images/pepsi.png">
                    <p class="product-title">
                        Product no2
                    </p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="product-holder">
                    <img class="img-responsive" src="images/coffe.png">
                    <p class="product-title">
                        Product no3
                    </p>
                </div>
            </div>

    </div>
</div>

现在我想动态创建这个块：

<div class="col-md-3">
    <div class="product-holder">
           <img class="img-responsive" src="images/coffe.png">
           <p class="product-title">
                Product no N
           </p>
     </div>
 </div>

以下是我到目前为止所做的尝试：

<script>
    function onSelectGroup(Id) {
        $.ajax({
            method: "GET",
            url: "Products/GetProductsByCategoryId",
            data: { categoryId: Id }
        })
.done(function (response) {
    //In response I am getting my products, looping through them to create divs like in code above
    for (var i = 0; i < response.length; i++) {

        //<div class="col-md-3">
        //       <div class="article-holder">
        //           <img class="img-responsive" src="images/picture_not_available_400-300.png">
        //           <p class="product-title">
        //               Product no 1
        //           </p>
        //       </div>
        //   </div>

        //Trying to append it to my .product class because it's parent of this divs above
      $(".products").append('<div class="col-md-3"></div>');
      $(".products).appendChild('<div class="article-holder"></div>');
    }
})};
</script>

但不幸的是，这不起作用。。。我尝试了其他一些方法，但这些附件没有按预期工作：/

谢谢你们的帮助

---

干杯

I您可以像创建任何字符串一样创建dom元素，并将其附加到容器中

函数onSelectGroupId{ //作为回应，我得到了我的产品，通过它们循环创建div，如上面的代码所示

---

对于var i=0；i您可以使用jquery创建一个新元素并正确填充它

for (var i = 0; i < response.length; i++) {

    //<div class="col-md-3">
    //       <div class="article-holder">
    //           <img class="img-responsive" src="images/picture_not_available_400-300.png">
    //           <p class="product-title">
    //               Product no 1
    //           </p>
    //       </div>
    //   </div>

    //Trying to append it to my .product class because it's parent of this divs above
  var newelem = $('<div class="col-md-3"></div>');
  var artholder = $('<div class="article-holder"></div>');
  newelem.append(artholder);
  artholder.append(<your-image><your article title>);
}

---

很接近；您所需要做的就是为results对象中的每个项创建一个元素

---

对于这个问题有很多答案，可能会用javascript代码来解决这个问题。我发布了一个不同的方法，正如OP在评论中特别要求的那样

有时，我不喜欢用jQuery在javascript中构建复杂的HTML标记，我担心我可能会丢失打字错误或“等等”。在这种情况下，我希望我的action方法返回一个视图结果HTML标记作为ajax调用的响应，我可以根据需要简单地用它更新DOM

public ActionResult GetProductsByCategoryId(int categoryId)
{
    var p = db.Products.Where(a=>a.CategoryId==categoryId).ToList();
    return PartialView("ProductList",p);
}

现在我将有一个名为ProductList.cshtml的局部视图，它是产品列表的强类型，我可以循环遍历传递给它的项，并呈现我想要的任何标记

下面是一个简单的示例，我使用css类col-md-3为传递给它的集合中的每个项呈现一个div。您可以更新它以呈现您想要呈现的任何标记

@model List<Product>
@foreach (var item in Model)
{
    <div class="col-md-3">
        <div class="product-holder">
            <img class="img-responsive" src="@item.ImageUrl">
            <p class="product-title">
                @item.Name
            </p>
        </div>
    </div>
}

请记住，现在得到的HTML的有效负载更大了

---

与JSON数据进行比较。因此，在您认为合适的情况下使用此方法。使用此方法，我可以在我的局部视图中使用C方法，例如，在某个位置构建图像的路径/使用Html帮助程序方法等。您是否缺少这些方法。例如，这里，$.products。？？@Shyju是，因为我没有按原样复制它在我的visual studio中，现在我将编辑它。到目前为止，我了解到您想要动态创建产品div，您的主要div是products，您的产品HTML是

product no N

对吗？您可能会ider发送部分视图结果而不是JSON数组，这可能会减少错误prone@Shyju你能举个例子吗？我会接受你的回答，因为正如你所说的，这是一种不容易出错、更专业的解决方法？

@model List<Product>
@foreach (var item in Model)
{
    <div class="col-md-3">
        <div class="product-holder">
            <img class="img-responsive" src="@item.ImageUrl">
            <p class="product-title">
                @item.Name
            </p>
        </div>
    </div>
}

<div class="col-md-8" >
    <div id="product-list" class="products row">
    </div>
</div>

$.ajax({
        method: "GET",
        url: "@Url.Action("GetProductsByCategoryId","Products")",
        data: { categoryId: 2345 }
    })
    .done(function(response) {
        $("#product-list").html(response);
    }).fail(function(a, a, e) {
        alert(e);
    });