javascript - 如何在 html/javascript 中将带有某些类的 div 添加到另一个 div(彼此内部)

Question

我想通过单击 html/view 中的类别来列出数据库中的产品。首先，我用 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>

现在我想动态创建这个 block :

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

但不幸的是，这不起作用...我尝试了其他一些方法，但此附加项未按预期工作:/

谢谢大家的帮助干杯

Answer 1

针对该问题发布了许多答案，这些答案可能会通过 javascript 代码解决问题。 我正在发布一种不同的方法，因为OP在评论中特别要求它。

有时，我不喜欢使用 jQuery 在 javascript 中构建复杂的 HTML 标记(我担心我可能会犯错(缺少 ""或 ' 等...)在这种情况下，我希望我的操作方法返回一个 View 结果(HTML 标记)作为我的 ajax 调用的响应，并且我可以根据需要简单地更新 DOM。

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

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

这是一个简单的示例，我为传递给它的集合中的每个项目渲染一个带有 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>
}

现在我所要做的就是调用这个操作方法，并使用响应来更新我的 DOM。让我们为我们将更新的容器 div 提供一个 Id

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

现在，当 ajax 调用收到服务器的响应时，用 Id product-list 更新 DOM 元素的内部 html

$.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);
    });

请记住，现在您将获得更大的有效负载(生成的 HTML) 来自服务器的数据与 JSON 数据进行比较。 因此，请在您认为合适的情况下使用此方法。通过这种方法，我可以在部分 View 中使用 C# 方法(例如，在某个位置构建图像的路径/使用 Html 帮助器方法等)