Question

I want to embed an image inside an tag after the image on tag loaded.

So the sequence goes like this...

<a id="anchorID">
  <img onload="MyFunc(anchorID)>IMAGE1</img>
     //..After image 1 loaded add
     <img>IMAGE2</img>
</a>

<script>
 function MyFunc(anchorID)
{
  var anchorElement = document.getElementById(anchorID);
      //I want to create an image tag inside the anchorElement
}
</script>

Thanks for the help.. T_T

Answer 1

这是一个解决方案，只需将onload="addNextImage('#id_in_which_to_add_new_image', 'second_image_url')"添加到您想要首先加载的图片中。在下一个示例中，忽略宽度和样式（我把它们放在那里以便能够测试功能，使图像变小，所以我不需要滚动查看行为 - 我选择了一个巨大的图像来确保一切都按预期工作，边框使它看起来像进度条=）

<script>
    function addNextImage(selector, url) {
        var where = document.querySelector(selector);
        if (where) {
            var newImage = document.createElement('img');
            newImage.src = url;
            where.appendChild(newImage);
        }
    }
</script>
<a id="anchorID">
    <img onload="addNextImage('#anchorID', 'http://animalia-life.com/data_images/wallpaper/tiger-wallpaper/tiger-wallpaper-01.jpg')" src="http://hubblesource.stsci.edu/events/iyafinale/support/documents/gal_cen-composite-9725x4862.png" width="400px" style="border: 1px solid black" />
</a>

这应该适用于今天的大多数浏览器：IE8 +（只要您使用基本的CSS2.1选择器作为第一个参数），以及几乎所有其他正在使用的浏览器。（IE8 +因为它取决于querySelector）

Answer 2

我认为你在寻找的是

Javascript appendChild（）

var node = document.createElement("img");//Create a <img> node
node.src="SomeImageURL";
firstImage.appendChild(node);

JQuery append（）

$("#firstImageID").append("<img src="SomeImageURL"/>");

请参阅链接了解更多信息

Javascript

jQuery

Answer 3

您可以使用以下方法将图像添加到锚标记

function MyFunc(anchorID) {
    var anchorElement = document.getElementById(anchorID);
    if (anchorElement) {
        //I want to create an image tag inside the anchorElement
        var img = document.createElement("img");
        img.setAttribute("src", "yourImagePath");
        anchorElement.appendChild(img);
    }
}

希望有所帮助。

在<a> tag using javascript

3 个答案: