Hello. Friends please tell me the method on js how to add content to the page? I have a list of goods (books). How on the client side to add certain content to the site (for example, a picture with a description).

Is it possible to do this through localstorage?

.catalog { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 40px 0; } .product { width: 202px; overflow: hidden; height: auto; margin: 20px 20px; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15) } .product img { border: 1px solid black; border-radius: 3px; height: 200px; width: 200px; } .product h6 { font-size: 14px; font-weight: bold; } .product h6 a { color: #000; } .product h6 a:hover {text-decoration: underline;} .product h6 span { font-style: italic; font-weight: normal; } .product p { font-size: 13px; line-height: 18px; } .product p strong { font-weight: bold;} .item-footer { display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .foot-price { display: flex; justify-content: space-around; } .price { font-weight: bold; } .price.old { text-decoration: line-through; } .price-new { color: #fff; background: #cc3333; padding: 1px 3px; font-weight: bold; } a.add-cart { font-size: 10px; color: #c0c0c0; text-transform: uppercase; background: #1e1e20; padding: 3px 5px; border-radius: 5px; font-weight: bold; text-decoration: none; } a.add-cart:hover { color: #000000; background: #888; text-decoration: none; } .wrap-rate { width: 85px; height: 15px; background: url(../images/star.png) repeat-x; } .rate { width: 80%; height: 100%; background: url(../images/star1.png) repeat-x; } 
  <button>Добавить свой товар</button> <div class="catalog"> <div class="product item-1"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> <div class="product item-2"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> <div class="product item-3"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> <div class="product item-4"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> <div class="product item-5"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> <div class="product item-6"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> </div>

    3 answers 3

     .button { width:80px; overflow: hidden; margin: 10px; padding: 12px 12px; color: #fff; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1.3; justify-content: center; align-items: center; box-shadow: 2px 5px 10px rgba(#161616, .1); } .button.-flower { color: #FE8CDF; background: #353866; } 
     <!DOCTYPE html> <html> <body> <h2>JavaScript can Change HTML</h2> <div id="content">Hello World!</div> <script> document.getElementById("content").innerHTML = "<img src='https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg' width='64' height='64'><br>text text text<br><a href='#'><div class='button -flower'>Add to cart</div></a>"; </script> </body> </html>

      I probably would have done so. https://jsbin.com/zefirixupu/1/edit?html,js,output

      html:

       <button id="addItem">Добавить свой товар</button> <div class="catalog"> <div class="product item-1"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> </div> </body>

      javascript:

       var button = document.getElementById('addItem'); var catalog = document.querySelector('.catalog'); button.addEventListener('click', function(){ var productsLength = document.querySelectorAll('.product').length; var html = '<div class="product item-'+(productsLength+1)+'">' +'<a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a>' +'<div class="item-footer">' +'<div class="wrap-rate">' +'<div class="rate"></div>' +'</div>' +'<p><a href="#">Sort</a> <span>by Year</span></p>' +'<div class="foot-price">' +'<a class="add-cart" href="#">ADD TO CART</a>' +'</div>' +'</div>' +'</div>'; catalog.insertAdjacentHTML('beforeend', html); });

      But in theory it is better to use at least some simple template engine. For example the one that the underscorejs library offers.

        Here is an option using a template engine. https://jsbin.com/jipekigejo/3/edit?html,js,output

        html:

         <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script id="itemTemplate" type="x-template/underscore"> <div class="product item-<%=number%>"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> </script> <button id="addItem">Добавить свой товар</button> <div class="catalog"> <div class="product item-1"> <a href=""><img src="https://ewedit.files.wordpress.com/2016/09/hpsorcstone.jpg?w=405" alt=""></a> <div class="item-footer"> <div class="wrap-rate"> <div class="rate"></div> </div> <p><a href="#">Sort</a> <span>by Year</span></p> <div class="foot-price"> <a class="add-cart" href="#">ADD TO CART</a> </div> </div> </div> </div>

        javascript:

         var button = document.getElementById('addItem'); var itemTemplate = document.getElementById('itemTemplate').innerText; var catalog = document.querySelector('.catalog'); button.addEventListener('click', function(){ var productsLength = document.querySelectorAll('.product').length; var html = _.template(itemTemplate)({number: productsLength+1}); catalog.insertAdjacentHTML('beforeend', html); });