AppendChild and InsertBefore

Question

I'm having a little problem with hierarchy elements that are created dynamically.
Been trying to use insertBefore so they change place but no luck, wont get any errors but still I get the element under the other.

I have this function that creates a class called dice-window-wrapper and adds it to the page-content-wrapper.

var outerDiv = createElementWithClass('div', 'dice-window-wrapper'),
innerDiv = createElementWithClass('div', 'dice-menubar-wrapper');
outerDiv.appendChild(innerDiv);
document.getElementById("page-content-wrapper").appendChild(outerDiv);

And I get the print <div class="dice-window-wrapper">...</div>
No problem here.

Then I want to add an unordered list with some <li> tags, using this function:

icon_ul = createElementWithOutClass('ul');
var icon_ul = document.getElementById("page-menu-wrapper").appendChild(icon_ul);

icon_li = createElementWithId('li','icon-dice');
icon_ul.appendChild(icon_li);
document.getElementById("ul");

And the print will be <ul><li id="icon-dice"></li></ul>

The problem as I told is that <div class="dice-window-wrapper">...</div> should be under the string <ul><li id="icon-dice"></li></ul>.

But even if I change the icon_ul function from appendChild to insertBefore, nothing seems to change.

How exactly does your insertBefore code look like? It expects two arguments: The new child and the element before the new element should be inserted: developer.mozilla.org/en-US/docs/DOM/Node.insertBefore. — Felix Kling
– Felix Kling, Commented Feb 1, 2013 at 9:28
I'm very confused. Your first block adds two nested div into page-content-wrapper, your second block adds an ul into page-menu-wrapper, so it seems your two blocks works "separately", yet you ask why the first div doesn't have a certain relationship with the second ul? — Passerby
– Passerby, Commented Feb 1, 2013 at 9:29
@FelixKling This is what im trying with document.getElementById("page-menu-wrapper").insertBefore(icon_ul, outerDiv); — Dymond
– Dymond, Commented Feb 1, 2013 at 9:36
@Dymond Your div is inside page-content-wrapper, while your ul is inside page-menu-wrapper, so you can't force ul "above" or "under" div, as their order is determined first by their parent. — Passerby
– Passerby, Commented Feb 1, 2013 at 9:40
@Passerby: that's not relevant to the question. The question is why it ain't working. Your comment was implying you can't move elements to other parents. — Cerbrus
– Cerbrus, Commented Feb 1, 2013 at 9:52

Cerbrus · Accepted Answer · 2013-02-01 10:06:15Z

3

Try this:

document.getElementById("page-menu-wrapper").insertBefore(icon_ul, outerDiv);

insertBefore requires 2 parameters: what to add, and before what you want to add it.

See the documentation here:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);
//   ^ returns         ^add to this element:      ^ this new element, ^ before this existing element.

Okay, so the problem here is, assuming:

document.getElementById("page-menu-wrapper").insertBefore(icon_ul, outerDiv);

There, the parent of outerDiv isn't "page-menu-wrapper". Either replace that line with:

document.getElementById("page-content-wrapper").insertBefore(icon_ul, outerDiv);

Or replace:

document.getElementById("page-content-wrapper").appendChild(outerDiv);
// With
document.getElementById("page-menu-wrapper").appendChild(outerDiv);

edited Feb 1, 2013 at 10:06

answered Feb 1, 2013 at 9:30

Cerbrus

73.3k19 gold badges137 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dymond Over a year ago

Hey, exactly what I tried but the icon_ul, outerDiv show no change in the console. and no error either. Still get the Ul element under dice-window-wraper

Cerbrus Over a year ago

Are you calling the instertBefore in the same scope as where you create outerDiv? In other words, are you certain outerDiv isn't null or undefined? If instertBefore receives a null or undefined as referenceElement, it acts like a appendChild.

Passerby Over a year ago

(To avoid flooding OP's inbox) Caution that there's no outerDiv inside #page-menu-wrapper, so, I'm not sure if your old code works, but this seems to be also the mistake OP was facing before he notice.

Cerbrus Over a year ago

@Passerby: I noticed that, too, now. Edited the answer.

Collectives™ on Stack Overflow

AppendChild and InsertBefore

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related