将图像包裹到父对象中



在此之前,我为任何doublets道歉,我已经搜索了一些,但没有找到适合我需要的脚本。(顺便说一句: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>

我希望脚本是纯的、普通的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);

有人能把这件事详细说明一下我的要求吗?

我建议:

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演示。

最新更新