I have a an html code like this
<div>
<p> blah blah </p>
<div class = foo>
//some code
</div>
//some text
</div>
What i want to do by javascript is to add a wrapper div to the inner div with class foo. So that the code bees something like
<div>
<p> blah blah </p>
<div id = temp>
<div class = foo>
//some code
</div>
</div>
//some text
</div>
Please tell me how to do something like this. Non jquery solutions would be more helpful.. :)
I have a an html code like this
<div>
<p> blah blah </p>
<div class = foo>
//some code
</div>
//some text
</div>
What i want to do by javascript is to add a wrapper div to the inner div with class foo. So that the code bees something like
<div>
<p> blah blah </p>
<div id = temp>
<div class = foo>
//some code
</div>
</div>
//some text
</div>
Please tell me how to do something like this. Non jquery solutions would be more helpful.. :)
Share Improve this question asked Apr 16, 2011 at 5:50 ghostCoderghostCoder 7,6559 gold badges53 silver badges74 bronze badges 2- 1 I'm curious - what's the use case for this? Are you trying to do some drag/drop functionality? – Demian Brecht Commented Apr 16, 2011 at 5:52
- actually what i need to do is to delete the div with class foo as i am storing the html code in the db, and replace it with a custom tag <quirk class = foo> as i save it. the code in the div with class foo is regenerated each time the whole code is loaded from the db. so when the code is loaded all the quirk custom tags are replaced with divs and the code inside them regenerated. so, i as thinking, i'll add the extra div wrapper, change the html inside it using that div, and then remove the wrapper div i added – ghostCoder Commented Apr 16, 2011 at 5:57
3 Answers
Reset to default 7Using POJS is pretty simple:
function divWrapper(el, id) {
var d = document.createElement('div');
d.id = id;
d.appendChild(el);
return d;
}
Make sure you pass it something that can be wrapped in a div (e.g. don't give it a TR or TD or such).
You'll need some helper functions, I'm not going to post a getElementsByClassName function here, there are plenty on the web to choose from, a good one should first try qSA, then DOM method, then custom function.
Assuming you have one, consider something like:
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);
}
}
Edit
On reflection, I prefer the following method. It inserts the wrapper div into the DOM first, then moves the element to be wrapped into it. The above seems to move the element out of the DOM, then wants to use its position in the DOM to insert the new node. It might work, but seems prone to error to me. So here's a better solution, tested in 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)
}
}
$('.foo').wrap('<div id="temp"/>');
See $.wrap()
Note that if there are more elements than 1 wrapped, you got more elements with the ID "temp"
var wrapper = document.createelement('div');
var myDiv = document.getelementById('myDiv');
wrapper.appendChild(myDiv.cloneNode(true));
myDiv.parentNode.replaceChild(wrapper, myDiv);