javascript - 向图像元素添加新 div

Question

我试图向所有图像添加一个新的 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);   
}

Answer 1

图像不能有子元素，所以附加到它们上是行不通的。您可以在图像之前插入 div。

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

Answer 2

使用图形元素：

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