I have custom.js file in my django website. I need to create django - div in .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>
</article>
</div>
#-----------------
# End block
#-----------------
</div>
custom.js
var parent_div = document.getElementById("products-section");
product_node.innerHTML = "Big html block here";
parent_div.append(product_node);
How i can add so big block? And also i need to replace django variables by js variables in this block.
I need to replace django tags with javascript variables in my html block:
{% url 'product' product.url %}
img src="media/{{product.img}}
you can do it while using the html from string or read from file and then parse it twth cars and set in the 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>`