Javascript 不使用jquery包装元素

我的页面中有一些类似的代码：

    <div class="kg-gallery-image" style="flex: 0.708889 1 0%;">
<img src="photo.jpg"></div>

但它会将第一张图像的href添加到所有标签中。

您可以这样做：

获取要在其中添加

标记的父元素

使用

createElement

使用'src'获取

img

使用

appendChild

var parentElem=document.getElementsByClassName（“kg画廊图片”）；
var achorElem=document.createElement（“a”）；
var imgElem=document.querySelector（“img[src='photo.jpg']”）；
achorElem.href=“”+imgElem.src；
parentElem[0]。appendChild（achorElem）；
附睾无角虫（imgElem）
我用以下方法解决了问题：

Array.from(document.querySelectorAll('.kg-gallery-image img')).forEach((el) => {  
  var wrapper = document.createElement('a');
  wrapper.setAttribute('data-fslightbox', 'data-fslightbox');
  wrapper.href=""+el.src;
  el.parentNode.insertBefore(wrapper, el);
  wrapper.appendChild(el);
});

“有没有办法用纯js来创建这个？”-当然。你自己试过什么了吗？
.createElement（）
和
.appendChild（）
可能很方便。我试过这个，但不幸的是我不知道如何获得img src并将其添加到标记中。我刚刚编辑了我的原始问题。
el
是图像->
el.src
谢谢，这正是我的问题，我不知道如何将a元素包装在imgdon上，如果这有帮助，请不要忘记接受答案。你应该给出一些代码，可以一直尝试@MoeenSalehiYes，实际上这段代码对我不起作用，@aviboy2006你可以试着在“运行代码片段”中运行。您面临什么问题？我想用js复制jquery的这个.wrap函数：
<a data-fslightbox="" href=""></a>

<script>
$('.kg-gallery-image img ').each(function() {
    $(this).wrap("<a data-no-swup data-fslightbox href='" + this.src + "'/>");
});
</script>

Array.from(document.querySelectorAll('.kg-gallery-image img')).forEach((el) => {
  const wrapper = document.createElement('a');
  var imgSource = document.querySelector('.kg-gallery-image img').src;
  wrapper.href=""+imgSource;
 wrapper.setAttribute('data-fslightbox', 'data-fslightbox');

  el.parentNode.insertBefore(wrapper, el);
  wrapper.appendChild(el);
});

Array.from(document.querySelectorAll('.kg-gallery-image img')).forEach((el) => {  
  var wrapper = document.createElement('a');
  wrapper.setAttribute('data-fslightbox', 'data-fslightbox');
  wrapper.href=""+el.src;
  el.parentNode.insertBefore(wrapper, el);
  wrapper.appendChild(el);
});