keystation,
Не особо правильно. Уже эти функции работают правильно, вам лишь только надо при начальном формировании HTML документа создать блоки. Даже если у вас они формируются динамически, ведь не проблема взять часть моего кода по созданию блоков и добавить, как только страница прогрузится?
Вот два варианта:
1) Когда элементы грузятся с html файла:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.for_house{
background-color: yellow;
width: 150px;
height: 50px;
border: 1px solid black;
}
.for_office{
background-color: green;
width: 160px;
height: 50px;
border: 1px solid black;
}
</style>
<body>
<button id="button1" onclick="for_house()">Товары для дома</button>
<button id="button1" onclick="for_office()">Товары для офиса</button>
<div id="div1">
<div class="for_house">Товар для дома 1</div>
<div class="for_house">Товар для дома 2</div>
<div class="for_house">Товар для дома 3</div>
<div class="for_house">Товар для дома 4</div>
</div>
</body>
</html>
<script>
function for_house(){
$('.for_house').remove();
$('.for_office').remove();
count = 0;
for (i=0; i<4; i++){
var div = document.createElement('div');
div.classList.add("for_house");
var posleChegoDobavit = document.getElementById("div1");
posleChegoDobavit.appendChild(div);
count = i +1;
div.innerHTML = "товар для дома " + count;
}
}
function for_office(){
$('.for_office').remove();
$('.for_house').remove();
count = 0;
for (i=0; i<5; i++){
var div = document.createElement('div');
div.classList.add("for_office");
var posleChegoDobavit = document.getElementById("div1");
posleChegoDobavit.appendChild(div);
count = i +1;
div.innerHTML = "товар для офиса " + count;
}
}
</script>
2) Когда элементы формируются JS:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.for_house{
background-color: yellow;
width: 150px;
height: 50px;
border: 1px solid black;
}
.for_office{
background-color: green;
width: 160px;
height: 50px;
border: 1px solid black;
}
</style>
<body onload="for_house()">
<button id="button1" onclick="for_house()">Товары для дома</button>
<button id="button1" onclick="for_office()">Товары для офиса</button>
<div id="div1">
</div>
</body>
</html>
<script>
function for_house(){
$('.for_house').remove();
$('.for_office').remove();
count = 0;
for (i=0; i<4; i++){
var div = document.createElement('div');
div.classList.add("for_house");
var posleChegoDobavit = document.getElementById("div1");
posleChegoDobavit.appendChild(div);
count = i +1;
div.innerHTML = "товар для дома " + count;
}
}
function for_office(){
$('.for_office').remove();
$('.for_house').remove();
count = 0;
for (i=0; i<5; i++){
var div = document.createElement('div');
div.classList.add("for_office");
var posleChegoDobavit = document.getElementById("div1");
posleChegoDobavit.appendChild(div);
count = i +1;
div.innerHTML = "товар для офиса " + count;
}
}
</script>