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

【问题标题】：How to select element, enclose it in a div and add a class to it, in pure javascript?如何在纯javascript中选择元素，将其包含在一个div中并向其添加一个类？
【发布时间】：2013-08-18 10:43:09
【问题描述】：

建立一个响应式网站，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>

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

我正在用 Jekyll 用 Ruby 构建这个网站，以防你建议用不同的方式来解决这个问题。

【问题讨论】：

将getElementsByTagName 替换为querySelectorAll 或querySelector 并去掉[0] 下标，
你应该查看 jquery .wrap()。
@mithunsatheesh - OP 专门要求纯 JavaScript。
为什么不能直接将这些样式应用到 img 上？
@dc5：是的。 .wrap() 不是这个问题的答案。

标签： javascript html css

【解决方案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);
}

【讨论】：

谢谢。我做了 querySelectorAll 但它没有用。但是只有 querySelector 确实在第一张图像上工作。我在想我必须编写某种类型的循环？
更新了querySelectorAll的使用方法。

【解决方案2】：

一种方法是

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

【讨论】：

这绝对有效，但仅适用于帖子中的第一张图片。