Question

事先我为任何双联道歉，我搜索了一下，但没有找到符合我需要的脚本。（顺便说一句：Javascript不是我强大的一面）

我需要的是一个脚本，用div类“parent”包装div类“post”中的每个图像。

我所拥有的是以下内容：

<div class="post">
<img src="aSimpleImage.png">
</div>

我想要的结果是什么：

<div class="post">
<div class="parent"><img src="aSimpleImage.png"></div>
</div>

我希望脚本是纯粹的，vanilla Javascript，没有jQuery或脚本语言的额外外部http请求。我试过了：

var parent = element.parentNode; 
var wrapper = document.createElement('.parent'); // set the wrapper as child (instead of the element) 
parent.replaceChild(img, .parent); // set element as child of wrapper  
wrapper.appendChild(element);

编辑：找到这个片段

// create the container div
var dv = document.createElement('div');
// get all divs
var divs = document.getElementsByTagName('div');
// get the body element
var body = document.getElementsByTagName('body')[0];

// apply class to container div
dv.setAttribute('class', 'container');

// find out all those divs having class C
for(var i = 0; i < divs.length; i++)
{
   if (divs[i].getAttribute('class') === 'C')
   {
      // put the divs having class C inside container div
      dv.appendChild(divs[i]);
   }
}

// finally append the container div to body
body.appendChild(dv);

有人会对我要求的内容进行详细说明吗？

Answer 1

我建议：

function imgWrap(parent) {
    if (!parent || parent.nodeType !== 1) {
        return false;
    }
    else {
        var images = parent.getElementsByTagName('img'),
            newDiv = document.createElement('div'),
            tmp;
        newDiv.className = 'parent';
        for (var i = 0, len = images.length; i < len; i++) {
            tmp = newDiv.cloneNode(true);
            parent.insertBefore(tmp, images[i])
            tmp.appendChild(images[i]);
        }
    }
}

JS Fiddle demo

将图像包装到父级中

1 个答案: