[javascript]入父环绕图像

标签: JavaScript
发布时间: 2013/12/14 0:14:09
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

前一手我道歉为任何双峰已经搜查了一点,但还没有找到一个适合我的需要的脚本。(顺便说一句: Javascript 并不是我强方)

需要,是一个脚本,每个 div 类"开机自检"里面的形象包装与 div 类"父"。

我有以下内容:

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

有人将阐述这到我的要求吗?

解决方法 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 提琴的演示

官方微信
官方QQ群
31647020