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

-1

我想在加載標籤上的圖像後在標籤內嵌入圖像。使用javascript在<a>標籤中創建一個img元素

所以順序是這樣的......

<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

來源

2015-05-14 rj tubera

請問您可以張貼你爲什麼要這個多標籤圖像標籤裏面的錨標籤？ – syms

'img'是自動關閉標記'' – jcubic

你想在這些圖像標記上使用'src'屬性嗎？ – jcubic

下面是一個解決方案，只需將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）

來源

2015-05-14 09:53:35

先生爲什麼我的函數給我未捕獲的引用錯誤someimtes –

是因爲我的緩存？ –

對不起，我無法重現錯誤。你使用的瀏覽器是什麼，你是如何添加腳本（以及在哪裏）的，導致ReferenceError的引用究竟是什麼？ –

我想你正在尋找的是

的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

來源

2015-05-14 09:46:17

謝謝先生最後一個問題，我如何能夠防止未捕獲的參考錯誤。因爲它有時會給我那個錯誤 –

您可以使用下面的將圖像添加到錨標記

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

希望有所幫助。

來源

2015-05-14 09:49:05

''將被追加到''元素而不是它裏面 –

將img附加到a標籤意味着在標籤內添加img標籤。所以你最終會以結束。希望有幫助 –

謝謝先生最後一個問題，我如何能夠防止未捕獲的參考錯誤。因爲它給了我那個錯誤有時候 –

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

回答

相關問題