Page 1 of 1

how to insert html sections

Posted: Wed Aug 11, 2010 10:36 am
by shawngoldw
I know, the title sucks. I couldn't figure out how to word it, but this is a pretty simple question.

Say I have:

Code: Select all

<div id="enclosure">
   <div id="one">
   </div>
   <div id="three">
   </div>
</div>
I want to create a div, give it an id of two and insert it inbetween one and three. I'm looking for something similar to the following:

Code: Select all

var enclosure = document.getElementById("enclosure");
div = document.createElement("div");
div.id = "two";
div.innerHTML = somestr;
enclosure.appendChild(div);
This will add it after three, I just need a function to add it between one and three.

Thanks,
Shawn

Re: how to insert html sections

Posted: Wed Aug 11, 2010 12:51 pm
by PHPHorizons
Hello shawngoldw,

You did alright with the title ;) You're looking for insertBefore().

Cheers

Re: how to insert html sections

Posted: Wed Aug 11, 2010 12:57 pm
by shawngoldw
You can call me shawn.

Thanks, that's exactly what I was looking for.

Re: how to insert html sections

Posted: Wed Aug 11, 2010 1:33 pm
by PHPHorizons
You're welcome ;)

Re: how to insert html sections

Posted: Wed Aug 11, 2010 2:22 pm
by shawngoldw
If you could help me with one more function please?

For insertBefore I need to get div three. Normally, I would use:

Code: Select all

document.getElementById("three");
In this case I need:

Code: Select all

parent.getElementById("three");
(Parent was defined in my first post)
I need this because I specifically want to get three from within enclosure, not somewhere else. Although really three should not exist anywhere else if it is a well defined id.

But getElementById does not exist for that item. What would be the equivalent function? Something like getChildById, which I totally made up and does not exist.

Thanks,
Shawn

Re: how to insert html sections

Posted: Wed Aug 11, 2010 3:41 pm
by kaszu
There's no such function, but if you really need then you can use parent.getElementsByTagName('DIV') and then traverse them and compare ID

Re: how to insert html sections

Posted: Wed Aug 11, 2010 4:10 pm
by shawngoldw
Well that's too bad. I'll just use document.getElementById(), there should never be 2 items with the same id so it should work fine.

Thanks

Re: how to insert html sections

Posted: Wed Aug 11, 2010 4:23 pm
by PHPHorizons
You can ask "enclosure" it's lastChild.

var the_last_child = enclosure.lastChild;

https://developer.mozilla.org/En/DOM/Node.lastChild
http://msdn.microsoft.com/en-us/library ... 85%29.aspx

There are a whole host of DOM tree traversal methods. You can find them all on the two sites I listed above. And when you want to look at a quick cheat sheet for browser compatibility, check this site out: http://www.quirksmode.org/

Cheers

Re: how to insert html sections

Posted: Wed Aug 11, 2010 4:56 pm
by shawngoldw
Thanks, getting the last child does not help me though, as I'm not always looking for the last one. I don't need to put the extra computation or bytes towards traversing through the dom to do this, document.getElementById() will be enough.