javascript - 如何将包装 div 添加到内部 div

Question

我有一个像这样的html代码

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

//some code

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

我想要通过 javascript 做的是将包装 div 添加到类 foo 的内部 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)
  }
}