Как добавить HTML IMG на страницу из JavaScript, но не жестко закодировать его в JavaScript

Question

Я использую ajaxForm для загрузки изображения.При успешной загрузке я добавляю загруженное изображение в div на странице:

$("#ajaxUploadForm").ajaxForm({
            iframe: true,
            dataType: "json",
...
success: function (result) {
$("#imageList").prepend('<img src=' + result.message + '/>');

Теперь я думал, что неразумно помещать этот жестко закодированный тег <img/> в код JavaScript.Каков наилучший способ поместить изображение, но не использовать тег img в функции prepend ()?

Answer 1

У меня не было бы никаких проблем с этим ... если вы не беспокоитесь о недействительном URL, который может сломать тег ...

Вы можете использовать простой JavaScript

var img = new Image();
    img.src = result.message;

$("#imageList").prepend(img);

Answer 2

Используйте шаблон.Например:

<div style="display:none">
  <!-- This div contains all your templates -->
  <img src="about:blank" class="classesYouNeed" id="uploadSuccess">
</div>

, а затем используйте javascript:

$("#ajaxUploadForm").ajaxForm({
  iframe: true,
  dataType: "json",
  ...
  success: function (result) {
    var img = $('#uploadSuccess')
      .clone()
      .attr('id', somethingElse)
      .attr('src', result.message)

    $("#imageList").prepend(img);
  })
})

Существуют шаблоны JQuery, которые значительно облегчат это.

Answer 3

ИМХО, это лучший способ, не нужно ничего менять. Если вы не хотите динамически добавлять / отсоединять, вы можете использовать существующий img в качестве заполнителя и просто изменить его атрибут src, если вы хотите изменить его:

<img id="placeholder" src="initial/path" />

$("#placeholder").attr("src", result.message);

Но поскольку вы имеете дело со списком изображений, как подсказывает ваш код, я думаю, что ваше оригинальное решение больше подходит для вашего случая. Если вы когда-нибудь решите удалить изображение или отсортировать список или что-то еще, вы можете выбрать их, используя $("imageList img").

Редактировать: OTOH, если у вас очень сложная структура, которую вы хотите кодировать в HTML, но вам также нужно делать ее динамические копии, вы можете использовать clone как альтернатива:

<div id="model" style="display:none">complex markup goes here</div>

$("#model").clone().attr("id",anotherID).appendTo(target).show();