如何将一个包装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)
  }
}

Answer 2

var wrapper = document.createelement('div'); 
var myDiv = document.getelementById('myDiv'); 
wrapper.appendChild(myDiv.cloneNode(true)); 
myDiv.parentNode.replaceChild(wrapper, myDiv);

Answer 3

$('.foo').wrap('<div id="temp"/>');

请参阅$.wrap()

请注意，如果包含的元素多于1，则会有更多具有ID“temp”的元素