如何从javascript中将页面添加到html页面，但不是在javascript中对其进行硬编码

我使用ajaxForm来上传图像。在成功上传我上传图像div添加在页面上：如何从javascript中将页面添加到html页面，但不是在javascript中对其进行硬编码

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

现在，我就在想，这不是聪明地把这种硬编码在JavaScript代码<img/>标签。
在prepend（）函数中放置图像但不使用img标记的最佳方法是什么？

来源

2012-03-11 1110

为什么不聪明？ – epascarello 2012-03-11 13:13:38

恕我直言，这是最好的方式，没有必要改变任何东西。如果你不想动态附加/分离，你可以有一个现有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();

来源

2012-03-11 13:19:27 mgibsonbr

如果您克隆，则需要更改ID。 – epascarello 2012-03-11 13:42:41

@epascarello感谢您指出这一点！答案已更新 – mgibsonbr 2012-03-11 14:01:56

使用一个模板。例如：

<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的模板的框架存在，这将使这更简单。

来源

2012-03-11 13:20:03 koenpeters

我不会有任何问题与......除非你是担心无效的URL，它会破坏代码...

你可以使用简单的JavaScript

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

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

来源

2012-03-11 13:23:01 Endless

回答

相关问题