Как правильно писать HTML код в JS?

Question

[FlashDok]

Здравствуйте.
Подскажите как правильно размещать или брать из других файлов html код для встраивания его в html элемент?

<div id="body">
    <p>123</p>
</div>

Код выше как пример, если я хочу изменить содержимое div id="body" ,то я делаю в JS

document.getElementById("body").innerHTML = "Текст (но что делать если я хочу разместить большой html код?)";

Как например через innerHTML большую таблицу(многострочный HTML)? или можно использовать что-то другое?

Answer 1

[Anonymous Penguin]

О фреймворках мы даже не слышали...

Вот как сделать на чистом жс:

fetch('./block.html')
  .then(res => res.text())
  .then(text => document.getElementById('body').innerHTML = text)

И опять же, об этом тоже надо было знать

Comments

[FlashDok]

Спасибо.

[Anonymous Penguin]

FlashDok, хорошим тоном будет отметить решением, а то авторы вопросов не всегда делают это.
Что касается ответа, хочу добавить, что это асинхронный код. То есть, пока блок кода будет подгружаться из папки и вставляться на законное место, остальной код будет продолжать выполняться. И если ты попытаешься обратиться к этому блоку (например, другим селектором), то у тебя может возникнуть ошибка, потому что он до сих пор подгружается

[FlashDok]

Anonymous Penguin, а какие варианты есть еще? (не асинхронные). Есть ли у Вас ссылки или решения с такой реализацией (или "как это искать в гугле")

[Anonymous Penguin]

FlashDok, к сожалению, все фукции в JavaScript для работы с запросами - асинхронные. Если нужно продолжить выполнение только после подгрузки всех фрагментов - используй особенности асинхронности в JS, которые позволяют сделать это.

О фреймворках мы даже не слышали

Опять же, есть замечательные фреймворки, которые делают это. Но придется довольно много учить.

Вот как можно решить проблему:

async function getBlock(url) {
  const res = await fetch(url);
  const text = await res.text();
  return text;
}
async function loadAll() {
  const block1 = await getBlock('./block.html');
  document.getElementById('body').innerHTML = block1;
  // подгрузка остальных блоков - await getBlock(url)
}
async function main() {
  await loadAll();

  // здесь твой  в е с ь  основной код
};
main();