我有一个像这样的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 解决方案会更有帮助..:)
最佳答案
使用 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)
}
}
关于javascript - 如何将包装 div 添加到内部 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5684758/