Вопрос по верстке, а скорее по языку java

Как выполнить задачу что бы дублировалось не слова, а блоки с дизайном на html, css, java? и что бы в этих блоках можно было писать. Стоит задача сделать дорожную карту, не долго думая, я решил сделать альтернативу создания на кнопку допустим блока. В фото показано. Подробнее если, то там есть фигура сделана на html и css и можно вписывать туда свою информацию.

function doNew(){
    let div = document.createElement('div')
    var innerHtml = "";
    div.innerHTML = "block";
    document.getElementById("cont").append(div);
    
}
div{
    border:1px solid #ccc
    padding : 10px; 
    margin:5px;
    width : 120px;
    display:inline-block
    }
#cont{
        border:0;
        width:100%
}
.block{
        margin: 0;
        text-align: center;
        height: 250px;
        width: 200px;
        padding: 20px 40px; 
        background: #968089; /* фон рамки */
        font-size: 20px; /* размер шрифта */
        border: 2px dashed #e3c3d4; /* размер, форма и цвет рамки */
        border-radius: 10px; /*  радиус скругления углов рамки */
        box-shadow: 0 0 0 4px #968089, 2px 1px 6px 4px rgba(150, 128, 137, 0.5); /* смещение, размер и цвет тени рамки*/
          color: #fff;
          font-family: 'Lato', sans-serif;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/main.js"></script>
<title>Проба</title>
</head>
<body>
 <div id="cont">
    <div class="block">График работы </div>
    </div>
    <button onclick="doNew()">Ещё</button>
    <div class="block">
        BIM/ТИМ
     </div>

</body>
</html>


Ответы (1 шт):

Автор решения: HTO HOT

Вы не добавляете класс к новому блоку. И не java ,а javascript.

function doNew(){
    let div = document.createElement('div')
    div.innerHTML = "Какой-то блок";
    div.classList.add('block')
     
    document.getElementById("cont").append(div);
    
}
div{
    border:1px solid #ccc
    padding : 10px; 
    margin:5px;
    width : 120px;
    display:inline-block
    }
#cont{
        border:0;
        width:100%
}
.block{
        margin: 0;
        text-align: center;
        height: 250px;
        width: 200px;
        padding: 20px 40px; 
        background: #968089; /* фон рамки */
        font-size: 20px; /* размер шрифта */
        border: 2px dashed #e3c3d4; /* размер, форма и цвет рамки */
        border-radius: 10px; /*  радиус скругления углов рамки */
        box-shadow: 0 0 0 4px #968089, 2px 1px 6px 4px rgba(150, 128, 137, 0.5); /* смещение, размер и цвет тени рамки*/
          color: #fff;
          font-family: 'Lato', sans-serif;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/main.js"></script>
<title>Проба</title>
</head>
<body>
 <div id="cont">
    <div class="block">График работы </div>
    </div>
    <button onclick="doNew()">Ещё</button>
    <div class="block">
        BIM/ТИМ
     </div>

</body>
</html>

→ Ссылка