通过 javascript 插入内嵌图像

Question

我编写了一个脚本，通过 JSONP 获取图像 url，然后我需要将其写入浏览器，这是一个状态图像，为 onling.png、offline.png 等，

我的脚本如下所示。

<div id='STATUSDIV'></div>
    <script language=javacsript type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script>
    <script type="text/javascript">$(document).ready(function()
    { 
        $.getJSON('http://MYSSERVERNAME.COM/get.php?callback=?','q=value&index'+Math.random(),
        function(res)
        { 
            document.getElementById('STATUSDIV').innerHTML = ("<img src='"+res.img+"' />");
        });
    });
    </script>

使用此代码，我可以在 div statusdiv 内获取图像，但是我不能在单个页面上使用相同的代码块两次，因为两者都指向相同的 div。

我能做的快速事情是，我可以要求最终用户在每个页面上多次复制此代码来更改 div id，以便该图像将加载到不同的 div 上。

但我希望在复制的任何地方都有相同的代码，只内联写入图像。一种创建元素并写入该元素。但这不起作用。 document.write 也不起作用，因为它取代了所有内容。

有没有一种方法，当这个代码块调用时，代码不编写innerhtml，而是在页面上创建一个动态div并在其中写入图像。这个图像写入和创建 div 发生在调用脚本块的地方。这样，如果在页眉和页脚中调用相同的脚本，状态图像将同时出现在页眉和页脚上。

Answer 1

我所知道的最干净的方法是为您的代码创建一个函数，该函数应该很早就包含在页面中，以便它随处可用：

function insertStatusHere() {
    var thisId = "status" + insertStatusHere.myDivCntr++;
    document.write('<div class="statusContainer" id="' + thisId + '"></div>');
    $(document).ready(function() {
        $.getJSON('http://MYSSERVERNAME.COM/get.php?callback=?','q=value&index'+Math.random(), function(res) { 
            document.getElementById(thisId).innerHTML = ("<img src='"+res.img+"' />");
        });
    });
}
insertStatusHere.myDivCntr = 0;

脚本：

<script type="text/javascript">
insertStatusHere();
</script>

然后，在页面中有人想要状态图像的任何位置，他们可以放置此内联 在进行函数调用的位置动态插入具有唯一 div ID 的 div，并跟踪闭包中使用的每个 ID。