Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

handling nested DIV nodes

Status
Not open for further replies.
returnButton

returnButton

Programmer
Mar 31, 2009
7
GB
Hi, I've been playing around with nodes in JS for the 1st time. I'm getting how to appendChild and insertBefore, it's neat.

What I want to do is insert a DIV into another DIV, so that it wraps around whatever the outer DIV contains.

Hard to explain, here's what I mean:

before:
<div id="a">
div a content
<div id="c">
div c content
</div>
</div>

after (b is inserted):
<div id="a">
<div id="b">
div a content
<div id="c">
div c content
</div>
</div>
</div>

Can this be done? appendChild and insertBefore seem to stick the self-contained DIV either side, but I want it nested.

Thanks all
 
Sort by date Sort by votes
This is more like it:

Code: 
<html>
<head>

	<style type="text/css">
		#a {
			background-color: #CC6666;
			padding: 10px;
		}
		#b {
			background-color: #66CC66;
			padding: 10px;
		}
		#c {
			background-color: #6666CC;
			padding: 10px;
		}
	</style>

	<script type="text/javascript">

		function insertDivB() {
			var divB = document.createElement('div');
			divB.id = 'b';
			divB.innerHTML = 'div b content';

			// Create DIV B and insert at top of DIV A
			var divA = document.getElementById('a');
			divA.insertBefore(divB, divA.firstChild);

			// Move all of DIV B's children (except DIV A) into DIV A
			while (divA.childNodes.length > 1) {
				divB.appendChild(divA.childNodes[1]);
			}
		}

	</script>
</head>

<body>
	<div id="a">
		div a content
		<div id="c">
			div c content
		</div>
	</div>

	<a href="javascript:insertDivB();">Insert DIV B around DIV A's content</a>
</body>
</html>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Of course, instead of reading:

Code: 
//Move all of DIV B's children (except DIV A) into DIV A

the comment should read:

Code: 
// Move all of DIV A's children (except DIV A) into DIV B



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
with the example given,

srcDiv = document.getElementById("a"); // find the node
newdiv = document.createElement("div"); // make the new node
newdiv.setAttribute('id','b'); // id the new node
newdiv.innerHTML = WHATEVER + srcDiv.innerHTML; // fill the new node
srcDiv.innerHTML = ""; // empty it so it doesn't double up
srcDiv.appendChild(newdiv); // shove it in


now doing this with parent/child nodes gets a little messyish, because you still have to find the srcDiv, you still need to define the newdiv, and fill it, and in filling it you need to avoid the replication, the reason being the new inserted one shifts the childnodes.length so in essence you're inserting into the array and shifting all the other values by 1 or more

[thumbsup2]DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!
" I always think outside the 'box', because I'm never in the 'loop' " - DreX 2005
 
Upvote 0 Downvote
Hey dudes, that's done it, thanks v.much. I was at it for ages. I was trying to replicate by looping over the nodes and it just wasn't happening.

For anyone else wanting to do this, the adapted code is below. What's nice is if you keep clicking, it keeps adding them.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" xml:lang="en" lang="en">
<head>
<title></title>
<style>
#outer { padding:10px; background-color:#00ff00; }
#insertedDiv { padding:10px; background-color:#ffff00; }
#a, #b, #c { background-color:#0000ff; padding:5px; }
#d { background-color:#ffffff; }
#inner, #dummy1, #dummy2 { margin:5px; padding:10px; background-color:#ff0000; }
</style>

<script language="javascript" type="text/javascript">
<!--
function t()
{
srcDiv = document.getElementById("outer"); // find the node
newdiv = document.createElement("div"); // make the new node
newdiv.setAttribute('id','insertedDiv'); // id the new node
newdiv.innerHTML = 'inserted content' + srcDiv.innerHTML; // fill the new node
srcDiv.innerHTML = ""; // empty it so it doesn't double up
srcDiv.appendChild(newdiv); // shove it in

filltextarea();
}
function filltextarea()
{
document.getElementById('debug').value=document.getElementById('outer').innerHTML;
}
-->
</script>

</head>

<body onload="filltextarea();">

<div id="outer">
<div id="dummy1">dummy1</div>
<div id="inner">
inner content
<div id="a">blue.</div>
<div id="b">blue..</div>
<div id="c">
blue...
<div id="d">
white
</div>
</div>
more inner content
</div>
<div id="dummy2">dummy2</div>
</div>

<br /><a href="#" onclick="t();">do it</a><br /><br />

<textarea id="debug" style="width:600px;height:300px;"></textarea>

</body>

</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
639
ggriffit
ggriffit
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
91
bs6600
bs6600
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
90
malibu65k
malibu65k
bluemask11
  • Locked
  • Question
jQuery hide div class if total equal to 0
2
Replies
23
Views
231
bluemask11
bluemask11
GRIFFIJ
  • Locked
  • Question
Centre a div
Replies
5
Views
50
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top