Как выводить блоки из javascript в html?

const typesSelect = document.querySelector('.types-select');
if (typesSelect) {
  //Данные по содержанию меню
  const furnTypes = [
    {
      'id': 1,
      'title': 'Встраиваемая стиральная/посудомоечная машина, шт',
      'price': '1700',
    },
    {
      'id': 2,
      'title': 'Электрическая панель (независимая), шт',
      'price': '750',
    },
    {
      'id': 3,
      'title': 'Электрический шкаф (независимый) , шт',
      'price': '1050',
    },
    {
      'id': 4,
      'title': 'Электрическая плита , шт',
      'price': '1100',
    },
    {
      'id': 5,
      'title': 'Электрическая панель и шкаф (независимые)',
      'price': '1500',
    },
    {
      'id': 6,
      'title': 'Встраиваемая вытяжка, шт',
      'price': '1250',
    },
    {
      'id': 7,
      'title': 'Плоская вытяжка, шт',
      'price': '1250',
    },
    {
      'id': 8,
      'title': 'Плоская вытяжка, шт',
      'price': '1250',
    },
    {
      'id': 9,
      'title': 'Плоская вытяжка, шт',
      'price': '1250',
    },
    {
      'id': 10,
      'title': 'Плоская вытяжка, шт',
      'price': '1250',
    },
    {
      'id': 11,
      'title': 'Плоская вытяжка, шт',
      'price': '1250',
    },
  ];

  //Каждое активно может быть только один раз
  const activeMenuItems = new Set();

  const clickHandler = e => {
    if (activeMenuItems.add(parseInt(e.target.getAttribute("furn-id")))) {
      //Если поменялся перестроим меню
      updateActiveMenuItems(activeMenuItems);
    }
  };

  //Строим меню на основе данных items, вставляем в target
  //на элементы вешаем событие clickHandler
  function buildSelectMenu(target, items, clickHandler) {
    //создаем родителя
    const parentUl = document.createElement("ul");
    parentUl.classList.add('types-select__options');
    //Каждый из пунктов
    items.forEach(
      item => {
        const childLi = document.createElement("li");
        childLi.classList.add('types-select__option');
        childLi.setAttribute('furn-id', item['id']);
        childLi.addEventListener("click", clickHandler);
        const childTextBlock = document.createElement("div");
        const childTextBlock_2 = document.createElement("div");

        childTextBlock.classList.add('types-select__option-text');
        childTextBlock_2.classList.add('types-select__option-price');
        // Лучше потом на setHtml заменить, но пока нет поддержки
        childTextBlock.innerHTML = item['title'];
        childTextBlock_2.innerHTML = item['price'];
        childLi.appendChild(childTextBlock);
        childLi.appendChild(childTextBlock_2);
        parentUl.appendChild(childLi);
      }
    )
    target.appendChild(parentUl);
    return parentUl;
  }

  const updateActiveMenuItems = ids => {

    const parent = document.querySelector('.types-select__active-items'),
      parentRight = document.querySelector('.right-form-calculator__row');
    parent.innerHTML = parentRight.innerHTML = '';
    ids.forEach(id => {
      const curItem = furnTypes.find(el => el['id'] === id)
      const activeMenuItemEl = document.createElement("div");
      const activeMenuItemTitleEl = document.createElement("span");
      activeMenuItemTitleEl.innerHTML = curItem['title'];
      const activeMenuItemdeleteButtonEl = document.createElement("button");
      //Лучше через текстовую ноду
      activeMenuItemdeleteButtonEl.classList.add("_icon-close");
      activeMenuItemdeleteButtonEl.setAttribute('active-furn-id', curItem['id']);

      const rightMenuEl = document.createElement("div");
      const rightElText = document.createElement("div");
      const rightElPrice = document.createElement("div");
      rightMenuEl.classList.add('right-form-calculator__column');
      rightMenuEl.append(rightElText);
      rightMenuEl.append(rightElPrice);
      rightMenuEl.dataset.id = curItem['id'];
      rightElText.classList.add('right-form-calculator__name');
      rightElText.classList.add('name-service');
      rightElText.innerHTML = curItem['title'];
      rightElPrice.classList.add('right-form-calculator__cost');
      rightElPrice.classList.add('service');
      rightElPrice.innerHTML = curItem['price'];
      parentRight.append(rightMenuEl);

      activeMenuItemdeleteButtonEl.addEventListener("click", e => {
        //Чтобы кликалась не взирая на клик событие родителя
        if (e && e.stopPropagation) e.stopPropagation();

        if (activeMenuItems.delete(parseInt(e.target.getAttribute("active-furn-id")))) {
          //Если поменялся перестроим меню
          updateActiveMenuItems(activeMenuItems);
        }
      });

      activeMenuItemEl.appendChild(activeMenuItemTitleEl);
      activeMenuItemEl.appendChild(activeMenuItemdeleteButtonEl);
      parent.appendChild(activeMenuItemEl);

    });
    setTotalSum();
  }

  // Строим меню
  const furnitureMenu = buildSelectMenu(
    document.querySelector('#furnitureMenu'),
    furnTypes,
    clickHandler
  );

  document.querySelector('.types-select__btn').addEventListener("click", e => {
    document.querySelector('.types-select__menu').classList.toggle("_active");
  })
  window.addEventListener('click', e => {
    const target = e.target
    if (!target.closest('.types-select')) {
      document.querySelector('.types-select__menu').classList.remove("_active");
    }
  })
}

function setTotalSum() {
  const ststSum = parseInt(document.querySelector(".right-form-calculator__cost.km").innerHTML)
  const totalSum = Array.from(document.querySelectorAll('.right-form-calculator__cost.service'), e => +e.textContent)
    .reduce((summ, cost) => summ + cost, 0);
  document.querySelector('#summ').innerHTML = ststSum + totalSum;
}

<div class="left-form-calculator__select select types-select">
  <div class="types-select__menu">
    <div class="types-select__btn">
      <div class="types-select__active-items">
        Выберите услугу
      </div>
    <div class="types-select__icon _icon-arrow"></div>
  </div>
  <div id='furnitureMenu' class="types-select__body">
  </div>
  </div>
</div>