Как вставить большой HTML блок в Javascript? Django JS

У меня есть файл custom.js на моем сайте django. Мне нужно создать django - div в .js

catalog.html

                <div class="row px-3" id="products-section">

                       #-----------------
                       # This block should be placed from js
                       #-----------------
                        <div class="col-sm-4">
                            <article class="post post-medium border-0 pb-0 mb-5">
                                <div class="post-image">
                                    <a href="{% url 'product' product.url %}">
                                        <img src="media/{{product.img}}" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="" />
                                    </a>
                                </div>

                                <div class="post-content">
                                    <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="{% url 'product' product.url_dop %}">{{product.name}}</a></h2>

                                    <p>{{product.description}}</p>

                                    <div class="post-meta">
                                        <span><i class="far fa-user"></i> by <a href="{% url 'brandpage' product.manufacturer_url %}">{{product.manufacturer_name}}</a> </span>
                                        <span class="d-block mt-2"><a href="{% url 'product' product.url %}" class="btn btn-xs btn-light text-1 text-uppercase">Подробнее</a></span>
                                    </div>

                                </div>
                            </article>
                        </div>
                       #-----------------
                       # End block
                       #-----------------

                </div>

custom.js

var parent_div = document.getElementById("products-section");
var product_node = document.createElement("div");
product_node.className = "col-sm-4";
product_node.innerHTML = "Big html block here";
parent_div.append(product_node);

Как я могу добавить такой большой блок? И еще мне нужно заменить переменные django на переменные js в этом блоке.

вы можете сделать это при использовании html из строки или прочитать из файла, а затем разобрать его на две машины и установить в innerHTML

var parent_div = document.getElementById("products-section");
parent_div.innerHTML = `<div class="col-sm-4">
                            <article class="post post-medium border-0 pb-0 mb-5">
                                <div class="post-image">
                                    <a href="{% url 'product' product.url %}">
                                        <img src="media/{{product.img}}" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="" />
                                    </a>
                                </div>

                                <div class="post-content">
                                    <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="{% url 'product' product.url_dop %}">{{product.name}}</a></h2>

                                    <p>{{product.description}}</p>

                                    <div class="post-meta">
                                        <span><i class="far fa-user"></i> by <a href="{% url 'brandpage' product.manufacturer_url %}">{{product.manufacturer_name}}</a> </span>
                                        <span class="d-block mt-2"><a href="{% url 'product' product.url %}" class="btn btn-xs btn-light text-1 text-uppercase">Подробнее</a></span>
                                    </div>

                                </div>
                            </article>
                        </div>`
Вернуться на верх