динамическое создание блоков на js

Question

Есть такая задача, при клике города на карте появляется блок с информацией о человеке или нескольких людях(телефон, имя , почта и т.д.). Информация о людях записана в json. Вопрос состоит в том, как правильно в js получить блок следующего вида, чтоб потом в зависимости от клика по городу вставлять соответствующую информацию

<div class="coord"> 
          <div class="candCity"></div>
          <div class="candName"></div>
          <div class="candPhone"></div>
          <div class="candEmail"></div>
          <div class="candSocials">
            <a class="vkLink" href="#" target = "_blank"></a>
            <a class="telegramLink" href="#" target = "_blank"></a>
            <a class="facebookLink" href="#" target = "_blank"></a>
          </div>
</div>

Можно создать функцию , в которой будет прописано отдельно создания каждого div, каждого класса и т.д., но на сколько это правильно и есть ли более легкое решение

Answer 1

Можете ради тренировки повозиться с document.createElement() и придумать прикольные функции для удобной работы с ним. Но если HTML чуть длинный, легче не заморачиваться и работать со строкой. Многострочные строки через обратные кавычки - оставляют пробелы в коде. В теории это может привести к интересным сюрпризам. Поэтому так клеить их надежнее:

let json = {
  city: "Moscow",
  name: "John",
  phone: "314159265",
  email: "[email protected]",
}

document.getElementById('bubu').insertAdjacentHTML('beforeEnd', getCoordHTML(json) );

function getCoordHTML(obj){
  let vkLink = (obj.vkLink || " - - ");
  let fbLink = (obj.fbLink || " - - ");
  let tgLink = (obj.tgLink || " - - ");
  return (
    '<div class="coord">' +
      '<div class="candCity">' + (obj.city || "") + '</div>' +
      '<div class="candName">' + (obj.name || "") + '</div>' +
      '<div class="candPhone">' + (obj.phone || "") + '</div>' +
      '<div class="candEmail">' + (obj.email || "") + '</div>' +
      '<div class="candSocials">' +
        '<a class="vkLink" href="#' + vkLink + '" target="_blank">' + vkLink + '</a>' +
        '<a class="telegramLink" href="#' + tgLink + '" target="_blank">' + tgLink + '</a>' +
        '<a class="facebookLink" href="#' + fbLink + '" target="_blank">' + fbLink + '</a>' +
      '</div>' +
    '</div>'
  );
}

#bubu div {
  margin: 4px;
  border: 1px solid orange;
}

<div id="bubu"></div>

Если вдруг нужно будет использовать методы JS для работы с DOM, можно временно загнать такую строку под созданный div, что-то в нем изменить, потом отправить на страницу:

let html = getHTML(); // Захотелось что-то поменять, а не хочется создавать новую функцию.

let div = document.createElement('div');
div.innerHTML = html;
div.querySelector('div').classList.add('red');

document.body.insertAdjacentHTML('beforeEnd', div.innerHTML);

/***/

function getHTML() {
  return '<div>Длинный-длинный-HTML</div>';
}

.red {
  color: red;
}

БЛОГ НА HUSL

динамическое создание блоков на js

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