Изменение вида продуктов через javascript

Задача заключается в следующем. Нужно сделать кнопку, которая переключает вид товаров на сайте(кубиками или списком). Из моих идей:
Через ajax посылать запрос, а в ответ получать страницу с товарами в требуемом стиле Через js редактировать html код товаров(какой-то костыль, кажется) Другая страница в требуемом формате(самый худший вариант, как понимаете)

Прошу помочь с этой задачей. Как ее лучше решить? Может есть более простой способ?

Ответ

В данном случае стоит просто манипулировать стилями:
var products = document.getElementById('products'); document.getElementById('grid').addEventListener('click', function(){ products.classList.add('grid'); }); document.getElementById('list').addEventListener('click', function(){ products.classList.remove('grid'); }); .product { background: #CCC; width: 100%; height: 50px; border: 1px solid #FFF; box-sizing: border-box; float: left; } .grid .product { width: 50%; }