Проблемы с динамической записью HTML в Chrome

Question

Хорошо, я работаю над кодом для отображения всех изображений в папке в виде галереи. У меня есть сценарий PHP для поиска всех файлов в папке (его написал кто-то другой, и он отлично работает):

<?php
$directory = $_REQUEST['folder'];
if (!is_dir($directory)) {
 exit('Invalid diretory path');
}
$files = array();
foreach (scandir($directory) as $file) {
 if ('.' === $file) continue;
 if ('..' === $file) continue;
 $files[] = $file;
}
echo json_encode($files);
?>

Теперь у меня был javascript получить json из php и отобразить его в сетке:

const urlParams = (new URL(document.location)).searchParams;
const folder = urlParams.get('folder');
const gallery =  document.getElementById("web_gallery");

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);

    for(var i = 0; i < myObj.length; i++)
    {
      var write = "<img src='" + folder + "/" + myObj[i] + "' id='gallery_img'>";
      console.log(write);
      gallery.innerHTML += write;
    }
  }
};
xmlhttp.open("GET", "toJson.php?folder=" + folder, true);
xmlhttp.send();

Это отлично работает на Firefox, но ничего не отображает на Chrome. Я просмотрел несколько потоков здесь и ту, которая имеет наибольшую тягу, чтобы предположить, что мне следует попробовать использовать JQuery, поэтому я настроил это и написал следующее:

$(document).ready(function(){

const urlParams = (new URL(document.location)).searchParams;
const folder = urlParams.get('folder');
var url = "toJson.php?folder=" + folder;
var toWrite = [];

$.get(url, function( data ) {
  var images = JSON.parse(data);
  for(var i = 0; i < images.length; i++)
  {  
    toWrite.push("<img src='" + folder + "/" + images[i] + "' id='gallery_img'>");
    //$( "#web_gallery" ).append( write ); // Had this here before, but tried to move it down to after it's done.
  }
}).done(function()
{
  for(var i = 0; i < toWrite.length; i++)
  {
    $("#web_gallery").append(toWrite[i]);
  }
});
});

Кто-то еще посоветовал вам не 'Не делаю так много запросов на добавление, поэтому я изменил его на:

$(document).ready(function(){

const urlParams = (new URL(document.location)).searchParams;
const folder = urlParams.get('folder');
var url = "toJson.php?folder=" + folder;
var write = "";

$.get(url, function( data ) {
  var images = JSON.parse(data);
  for(var i = 0; i < images.length; i++)
  {
    write += "<img src='" + folder + "/" + images[i] + "' id='gallery_img'>\n";
  }
}).done(function()
{
    setTimeout(function () {
      $("#web_gallery").append(write);
    }, 1500);
});
});

Все они отлично работают в Firefox, но ни один из них не работает в Chrome, и я не конечно почему. Думаю, это связано со временем и скоростью записи на страницу.

Answer 1

Добавьте элемент изображения с помощью метода createElement.

var image = document.createElement('img');
image.src = imageFilePath;
$(image).appendTo("#web_gallery");