2013-06-18 36 views
0

我试图添加一个新的div元素到所有图像。我需要将新的div文本显示在所有图像的右下角。添加新的div到图像元素

什么我试着:

var links = document.images; 
for (var i=0; i < links.length; i++){ 
    var div_link = document.createElement("div"); 
    div_link.style.position = "relative"; 
    div_link.style.bottom = "10px"; 
    div_link.style.left = "10px"; 
    div_link.innerHTML = "56259"; 
    console.log(links[i]); 
    links[i].appendChild(div_link); 
} 

回答

3

图片不能有子元素,因此追加对他们来说是行不通的。您可以在图像前插入div。

links[i].parentNode.insertBefore(links[i], div_link); 
+0

或者,包裹IMG例如使用jQuery:'$(“img”)。wrap(“

”);'。 – mg007

+0

如果你想在图片后插入div,你可以做如下的事情:links [i] .parentNode.insertBefore(div_link,links [i] .nextSibling); – Sean

+0

@ mg007,世界上哪里有jQuery包含在这里? – epascarello

1

使用数字元件:

<figure> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption> 
</figure> 

裹与jQuery图像是这样的:

$('img').wrap('<figure />'); 
$('figure').append('<figcaption>Nice image!</figcaption>'); 
+0

jQuery标签在哪里? ;) – epascarello