Mi_Denis,
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<title> todo lists </title>
</head>
<body>
<button class="btn">Create new</button>
<script type="text/javascript">
document.querySelector('.btn').addEventListener('click', create, false)
function create(){
var Div = document.createElement('div');
var panel = document.createElement('div');
panel.className = 'panel';
var input = document.createElement('input');
var button = document.createElement('button');
button.textContent = 'add!';
button.addEventListener('click', function() {
var newDiv = document.createElement('div');
newDiv.innerHTML = '<div class="body">body<div class="footer">footer</div></div>';
Div.appendChild(newDiv);
});
panel.appendChild(input);
panel.appendChild(button);
Div.appendChild(panel)
document.body.appendChild(Div);
}
</script>
</body>
</html>