如何從javascript將html img添加到頁面，而不是在javascript中對其進行硬編碼

Question

我使用ajaxForm上傳圖像。 成功上傳后，我在頁面上將上傳的圖片添加到div ：

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

現在，我認為將這個硬編碼的<img/>標記放在javascript代碼中並不明智。
在prepend（）函數中放置圖像但不使用img標簽的最佳方法是什么？

Answer 1

我不會有任何問題...除非您擔心無效的URL可能會破壞標簽...

你可以使用簡單的JavaScript

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

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

Answer 2

恕我直言，這是最好的方法，無需更改任何內容。 如果您不想動態地附加/分離，則可以將現有的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();

Answer 3

使用模板。 例如：

<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模板框架，這將使此過程變得更加容易。