如何在纯javascript中选择元素、将其封装在div中并向其添加类？

建立一个反应迅速的网站，CMS的条目都在降价。因此，在所有新条目中将div编码到文档中是不切实际的。因此需要动态添加类

我需要选择一个

我找到了解决方案，通过硬编码到图像周围的post a div中

HTML

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

但这需要动态地进行。我试过了

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


var x=document.getElementsByTagName（'div.post img'）[0]；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；

我找到了这个rel，然后我按照链接，包括帮助我开始脚本的链接，但仍然对下一步感到困惑

我正在用Ruby和Jekyll建立这个网站，以防你建议用不同的方式来实现这个目标

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

这应该对你有用<代码>查询选择器

可以一直工作到IE8

如果可能有多个

标记，则可以使用

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

var-imgs=document.querySelectorAll（'div.post-img'）；
对于（变量i=0，l=imgs.length；i

这应该对你有用<代码>查询选择器可以一直工作到IE8

如果可能有多个

标记，则可以使用

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

var-imgs=document.querySelectorAll（'div.post-img'）；
对于（变量i=0，l=imgs.length；i

一种方法是

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

---

一种方法是

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

---

将

getElementsByTagName

替换为

querySelectorAll

或

querySelector

并删除

[0]

下标，您应该查看jquery

.wrap（）

@mithunsatheesh-OP特别要求纯javascript。为什么您不能直接将这些样式应用于img？@dc5:是的

.wrap（）

不是这个问题的答案。将

getElementsByTagName

替换为

querySelectorAll

或

querySelector

并删除

[0]

子脚本，您应该签出jquery

.wrap（）

@mithunsatheesh-OP特别要求纯javascript。为什么不能直接将这些样式应用于img？@dc5:是的

.wrap（）

不是这个问题的答案。这肯定有效，但仅适用于帖子中的第一张图片。这肯定有效，但仅适用于帖子中的第一张图片。谢谢。我做了QuerySelector，但它不起作用。但是只有querySelector在第一个图像上起作用。我想我必须编写某种类型的循环？更新为如何使用

querySelectorAll

。谢谢。我做了QuerySelector，但它不起作用。但是只有querySelector在第一个图像上起作用。我想我必须编写某种类型的循环？更新为如何使用

querySelectorAll

。