如何将一个包装div添加到内部div

Question

我有一个像这样的HTML代码

<div>
<p> blah blah </p>
<div class = foo>

//some code

</div>
//some text
</div>

我想通过javascript做的是使用类foo向内部div添加包装器div.这样代码变成了类似的东西

<div>
<p> blah blah </p>
<div id = temp>
<div class = foo>

//some code
</div>
</div>
//some text
</div>

请告诉我如何做这样的事情.非jquery解决方案会更有帮助.. :)

Answer 1

使用POJS非常简单:

function divWrapper(el, id) {
  var d = document.createElement('div');
  d.id = id;
  d.appendChild(el);
  return d;
}

确保你传递了一些可以包裹在div中的东西(例如,不要给它一个TR或TD等).

你需要一些辅助函数,我不打算在这里发布一个getElementsByClassName函数,网上有很多可供选择,一个好的应该首先尝试qSA,然后是DOM方法,然后是自定义函数.

假设你有一个,请考虑以下事项:

function wrappByClass(className) {
  var el, elements = getElementsByClassName(className);

  for (var i = elements.length; i--;) {
    el = elements[i];
    el.parentNode.replaceChild(divWrapper(el, 'foo' + i), el);
  }
}

编辑

经过反思,我更喜欢以下方法.它首先将包装div插入DOM,然后将要包装的元素移入其中.上面似乎将元素移出DOM,然后想要在DOM中使用它的位置来插入新节点.它可能会起作用,但似乎容易出错.所以这是一个更好的解决方案,在Safari中测试:

// Quick implementation of getElementsByClassName, just for prototypeing
function getByClassName(className, root) {
  var root = root || document;
  var elements = root.getElementsByTagName('*');
  var result = [];
  var classRe = new RegExp('(^|\\s)' + className + '(\\s|$)');

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    if (classRe.test(elements[i].className)) {
      result.push(elements[i]);
    }
  }
  return result;
}

var divWrapper = (function() {
  var div = document.createElement('div');

  return function(el, id) {
    var oDiv = div.cloneNode(false);
    oDiv.id = id;
    el.parentNode.insertBefore(oDiv, el);
    oDiv.appendChild(el);
  }
}());

function wrapByClassName(className) {
  var els = getByClassName(className);
  var i = els.length;
  while (i--) {
    divWrapper(els[i], 'foo' + i)
  }
}