如何為我使用 jquery 到 append 一個 div，它還包括它的所有嵌套 div？

Question

當用戶創建產品時，我希望將該產品廣播給所有其他用戶並動態添加到他們的屏幕上。 到目前為止，廣播方面的效果非常好。

但是如何以簡單的方式動態添加這個“.product”class，以及所有嵌套的 div？ 目前我唯一能想到的是將所有的 div 復制並粘貼到 jquery 變量中並以這種方式添加 - 必須有更簡單的方法。

這是頁面加載時首次加載產品的位置

<div class="product" id="{{$product->id}}">
                            <div class="product-image"><img src="/imgs/products/{{$product->type_id}}.png"></div>
                            <div class="product-content">
                                <div class="product-title" id="product-title">
                                    {{ strtoupper(\App\ProductType::where('id', $product->type_id)->first()->name)}}
                                </div>
                                <div class="product-price">PRICE PER UNIT: <div class="price-value" id="price">{{$product->price}}</div> EXENS</div>
                                <br/>
                                QUANTITY: <div class="quantity-value" id="quantity">{{$product->quantity_available}}</div>
                                @if(strpos(\App\Group::where('id', $player->group_id)->first()->options, "\"showName\":true") !== false)
                                    <br/>
                                    SELLER: <div class="seller" id="seller">{{\App\User::where('id',$product->seller_id)->first()->name}}</div>
                                @endif
                                <br/>
                                PRICE: <div class="total-price" id="total-price">{{$product->price * $product->quantity_available}}</div>
                                <form class="buy-product-form"  action="/UoE/buy-product/{{$product->id}}" method="POST">
                                    {{csrf_field()}}
                                    <button class="pull-right btn btn-primary">BUY NOW</button>
                                </form>
                            </div>
                     </div>

收到事件后，我能想到的唯一方法是：

var productToAdd="<div class='buy-product-form'><div id='price'></div> " +
                    "" +
                    "" + //insert a massive string here containing all the other aforementioned sub-divs
                    "" + //And populate with json data
                    "" +
                    "</div>";

                $('.content').append(productToAdd);

Answer 1

我的解決方案是獲取問題中發布的整個代碼，並將其作為一個大的 HTML 標記。 這樣我的 JS function 可以 append 頁面與 HTML 產品 div 並且它已經與必要的事件偵聽器綁定。