如何在没有jQuery的情况下将每个父级附加到JS中？

Question

我希望使用该图片的alt标签的内容优雅地注释图像，我不想使用jQuery或其他任何多余的东西。

如何在Javascript中附加每个父级？

这是我到目前为止所做的（仅适用于jQuery）：

// after jQuery
$('img', 'figure').each(function() {
  $(this).parent().append('<figcaption class="image-text">' + this.alt + '</figcaption>'); 
});

演示：https://jsfiddle.net/0Lqxb4cp/

谢谢。

Answer 1

您可以使用以下内容进行转换：

var elements = document.querySelectorAll("img");
for(var i = 0; i < elements.length; i++) {
    var figCaption = '<figcaption>' + elements[i].getAttribute("alt") + '</figcaption>';
    elements[i].parentNode.innerHTML += (figCaption);
}

看到它正常工作：https://jsfiddle.net/y1rjL0qm/3/

Answer 2

我认为这有助于你的工作

<script type="text/javascript">
var path = $(this).parent() ;
var image = '<figcaption class="image-text">' + this.alt + '</figcaption>';
$('img', 'figure').each(function() {
  path.appendChild(image); 
});
</script>