<a>使用javascript</a>在<a>標簽中</a>創建一個img元素

Question

我想在標簽上的圖像加載后將圖像嵌入標簽內。

所以序列是這樣的...

<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>

感謝您的幫助。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"/>");    

查看更多信息的鏈接

Java腳本

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);
    }
}

希望能有所幫助。