how to insert html sections

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
shawngoldw
Forum Contributor
Posts: 212
Joined: Mon Apr 05, 2010 3:38 pm

how to insert html sections

Post 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
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: how to insert html sections

Post by PHPHorizons »

Hello shawngoldw,

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

Cheers
shawngoldw
Forum Contributor
Posts: 212
Joined: Mon Apr 05, 2010 3:38 pm

Re: how to insert html sections

Post by shawngoldw »

You can call me shawn.

Thanks, that's exactly what I was looking for.
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: how to insert html sections

Post by PHPHorizons »

You're welcome ;)
shawngoldw
Forum Contributor
Posts: 212
Joined: Mon Apr 05, 2010 3:38 pm

Re: how to insert html sections

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: how to insert html sections

Post 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
shawngoldw
Forum Contributor
Posts: 212
Joined: Mon Apr 05, 2010 3:38 pm

Re: how to insert html sections

Post 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
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: how to insert html sections

Post 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
shawngoldw
Forum Contributor
Posts: 212
Joined: Mon Apr 05, 2010 3:38 pm

Re: how to insert html sections

Post 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.
Post Reply