如何从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模板框架，这将使此过程变得更加容易。