<!DOCTYPE HTML>
<html>
<head></head>
<body>
<input id='n' type='text'>
<input type='button' onclick='if(!createBlock()) {alert("Invalid input value")}'>
<div id='insert'></div>
<script>
function createBlock() {
document.getElementById('insert').innerHTML = '';
var n = document.getElementById('n').value;
if (!(n = parseInt(n))) return false;
for (var i = 0; i < n; ++i) {
var el = document.createElement('div');
document.getElementById('insert').appendChild(el);
el.className = 'block';
el.setAttribute('list_id', i + 1);
el.innerHTML = i + 1;
}
return true;
}
</script>
<style>
.block {
width: 50px;
height: 50px;
background: red;
margin: 5px;
}
</style>
</body>
</html>
Я вам сделал медвежью услугу. В следующий раз задавайте вопрос по какой-то конкретной части, а не просите код написать