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 `

...

` No problem here. Then I want to add an unordered list with some `

` 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…

Accepted Answer

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);
```

AppendChild and InsertBefore

Solution

Problem