Как заставить JavaScript работать внутри HTML-тегов DIV?

Оффтоп javascript
1

Я пытаюсь запустить PHP-скрипт через JavaScript внутри HTML, но он не соблюдает выравнивание тегов div. Скрипт выполняется внутри body, но вне div. Я делаю это, чтобы страница загружалась быстрее, иначе браузер крутится 20 секунд, пока данные загружаются от третьей стороны. Нужно, чтобы страница загружалась быстро, а потом, когда данные из PHP будут готовы, они отображались внутри div. Вот мой код:

<div>
<script>
window.onload = function() {
  fetch('обработчик.php')
    .then(ответ => ответ.text())
    .then(данные => {
      console.log('Ответ PHP:', данные);
      const элемент = document.createElement('pre');
      элемент.textContent = данные;
      document.body.appendChild(элемент).innerHTML = данные;
    })
    .catch(ошибка => console.error('Ошибка загрузки PHP:', ошибка));
};
</script>
</div>

Как исправить этот код, чтобы данные отображались внутри div?

2

Хм, а почему бы не использовать async/await? Это сделает код чище:

async function загрузитьДанные() {
  try {
    const ответ = await fetch('обработчик.php');
    const данные = await ответ.text();
    document.querySelector('div').innerHTML = данные;
  } catch (ошибка) {
    console.error('Упс:', ошибка);
  }
}

загрузитьДанные();

Так данные появятся прямо в нужном div’е. Просто и работает!

3

привет! я тоже сталкивался с похожей проблемой. мой совет - попробуй использовать метод querySelector для выбора нужного div’а. например так:

const контейнер = document.querySelector(‘div’);
контейнер.innerHTML = данные;

это позволит выбрать первый div на странице и вставить в него данные. если у тебя несколько div’ов, можно добавить им классы и выбирать по классу:

const контейнер = document.querySelector(‘.мой-контейнер’);

надеюсь, это поможет! дай знать, если будут еще вопросы

4

Дружище, твоя проблема в том, что ты добавляешь элемент в body, а не в нужный div. Вот как это исправить:

  1. Дай id твоему div’у, например ‘result-container’
  2. Используй document.getElementById() для получения этого div’а
  3. Добавляй новый элемент в этот div, а не в body

Примерно так:

const container = document.getElementById('result-container');
container.innerHTML = данные;

Так данные будут отображаться именно там, где нужно. И да, fetch - отличный выбор для асинхронной загрузки. Удачи!