Задать вопрос
mr_akkain
@mr_akkain
Потихоньку учусь
javascript

Как динамически добавлять дочерние элементы в форму?

Как сделать так, чтобы при нажатии на кнопку (на скриншотах под номерами) добавлялся дочерний набор элементов в родительский блок с сохранением всей структуры. Более наглядно на скриншотах.
627b9df3a5604607157546.png
627b9e2a5ef17453401654.png
627b9e308330c879346684.png
627b9e3984d0b347500532.png
627b9e403a0c1635516238.png

HTML разметка:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Форма</title>
</head>
<body>
  <div class="form">
    <div class="block1">
      <input type="text" placeholder="Дата">
      <input type="text" placeholder="Вид загрузки">
      <div class="block2">
        <input type="text" class="out" placeholder="Исходящий">
        <div class="add4">4</div>
        <div class="block3">
          <input type="text" class="point" placeholder="Пункт">
          <div class="add3">3</div>
          <div class="block4">
            <input type="text" class="car" placeholder="ТС">
            <div class="add2">2</div>
            <div class="block5">
              <input type="file" class="amount">
              <div class="add1">1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="sub-btn">Отправить</button>
  </div>
</body>
</html>


CSS:
.add {
    cursor: pointer;
  }

  input {
    font-size: 16px;
    width: 170px;
  }

  input[type=file] {
    font-size: 14px;
    width: 180px;
  }

  .block1, .block2, .block3, .block4, .block5, .block6 {
    border: solid;
    padding: 5px;
    margin:5px;
    border-width: 2px;
    border-color: #000000;
  }

  .block1 {
    width: 340px;
  }

  .block2 {
    width:320px;
  }

  .block3 {
    width:300px;
  }

  .block4 {
    width:280px;
  }

  .block5 {
    width:260px;
  }

  .block6 {
    width:260px;
  }

  .add1, .add2, .add3, .add4 {
    display:inline-block;
    cursor: pointer;
    padding: 3px;
    margin: 3px;
    background-color: #e3e3e3;
    border-radius: 100%;
    font-size: 21px;
    width: 26px;
    text-align: center;
  }

  .point, .out, .car, .amount {
	 display:inline-block;
  }
  • Вопрос задан
  • 119 просмотров
3 комментария
Подписаться 1 Средний 3 комментария
Решения вопроса 1
Dr_Elvis
@Dr_Elvis
В гугле забанен
insertAdjacentHTML
с параметром beforeend
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
mr_akkain
@mr_akkain Автор вопроса
Потихоньку учусь
Нашел для себя решение, правда, код получился "громоздким".

$(document).on('click', 'div[class^="add1"]', function(e) {
    var addFileHtml = '<input type="file" class="amount">';
    e.target.insertAdjacentHTML('afterend', addFileHtml);
});

$(document).on('click', 'div[class^="add2"]', function(e) {
    var carPlateHtml= '<div class="block4"><input type="text" class="car" placeholder="ТС"><div class="block5"><input type="file" class="amount"><div class="add1">1</div></div></div>';
    e.target.parentElement.insertAdjacentHTML('afterend', carPlateHtml);
});

$(document).on('click', 'div[class^="add3"]', function(e) {
    var pointMsgHtml = '<div class="block3"><input type="text" class="point" placeholder="Пункт"><div class="block4"><input type="text" class="car" placeholder="ТС"><div class="add2">2</div><div class="block5"><input type="file" class="amount"><div class="add1">1</div></div></div></div>';
    e.target.parentElement.insertAdjacentHTML('afterend', pointMsgHtml );
});

$(document).on('click', 'div[class^="add4"]', function(e) {
    var msgNumberHtml = '<div class="block2"><input type="text" class="out" placeholder="Исходящий"><div class="block3"><input type="text" class="point" placeholder="Пункт"><div class="add3">3</div><div class="block4"><input type="text" class="car" placeholder="ТС"><div class="add2">2</div><div class="block5"><input type="file" class="amount"><div class="add1">1</div></div></div></div></div>';
    e.target.parentElement.insertAdjacentHTML('afterend', msgNumberHtml);
});
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Отрисовать в SVG иконки характеристик
04 мая 2024, в 07:13
2000 руб./за проект
Собрать сайт товаров из китая по шаблону, образцу на Shopify
04 мая 2024, в 07:01
40000 руб./за проект
Авторегистратор телеграм аккаунтов
04 мая 2024, в 06:10
4000 руб./за проект
Ещё заказы