如何为我使用 jquery 到 append 一个 div，它还包括它的所有嵌套 div？

Question

When a user creates a product, I want that product to be broadcasted to all other users and dynamically added to their screens. So far the broadcast aspect works amazingly.

But how can I dynamically add in this '.product' class, as well as all of a nested divs in an easy way? At the moment the only thing I can think of is copying and pasting all of it's divs in a jquery variable and adding it that way- there must be an easier way.

Here is where products are first loaded in when the page loads

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

When the event is received the only way I can think of doing it as:

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

My solution was to take the entire code posted in the question and do make it as a one big HTML tag. That way my JS function can append the page with a HTML product div and it will already be bound with the necessary event listeners.