javascript - 如何在纯 javascript 中选择元素，将其包含在一个 div 中并向其添加一个类？

Question

搭建响应式网站，CMS的入口都是markdown的。因此，在所有新条目中将 div 编码到文档中是不切实际的。所以需要动态添加类。

我需要选择一个 <img>在帖子中然后用具有特定类的 div 包装它来设置它的样式。否则图像的原始宽度会影响布局。

我通过将图像周围的 div 硬编码到帖子中找到了解决方案

HTML

<div class="imgWrap">
  <img>
</div>

CSS

.imgWrap { 
  margin: 0 auto 18px;
  width: 100%; 
}

.imgWrap img { 
  max-width: 96%; 
}

但这需要动态发生。我试过了

<script>
  var x=document.getElementsByTagName('div.post img')[0];
  document.write("<div class="imgWrap">");
  document.write("<img>");
  document.write("</div>");
</script>

我找到了这个 rel Javascript - How to add div class to createElement然后我点击了链接，包括 HTML DOM className Property这帮助我启动了脚本，但对下一步仍然感到困惑。

我正在使用 Jekyll 在 Ruby 中构建这个站点，以防您建议采用不同的方法来解决这个问题。

Answer 1

var img = document.querySelector('div.post img');
var div = document.createElement('div');
div.className = 'imgWrap';
img.parentNode.insertBefore(div, img);
div.appendChild(img);

这应该适合您。 querySelector一直工作到 IE8。

FIDDLE

如果有多个 <img> 的可能性标签，你可以使用 document.querySelectorAll然后遍历这些并进行相同的操作:

var imgs = document.querySelectorAll('div.post img');
for ( var i = 0, l = imgs.length; i < l; ++i ) {
    var img = imgs[i];
    var div = document.createElement('div');
    div.className = 'imgWrap';
    img.parentNode.insertBefore(div, img);
    div.appendChild(img);
}