Tengo un archivo custom.js en mi sitio web de django. Necesito crear django - div en .js
catálogo.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>personalizado.js
var parent_div = document.getElementById("products-section"); product_node.innerHTML = "Big html block here"; parent_div.append(product_node);¿Cómo puedo agregar un bloque tan grande? Y también necesito reemplazar las variables django por variables js en este bloque.
Necesito reemplazar las etiquetas de django con variables de javascript en mi bloque html:
{% url 'product' product.url %} img src="media/{{product.img}}puede hacerlo mientras usa el html de la cadena o lee del archivo y luego lo analiza con los autos y lo configura en el HTML interno
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>`