<body>
<div id="outer">
<script>var e = document.createElement("div");
e.id = "inner1";
document.body.appendChild(e);</script>
<script>document.write("<div id='inner2'></div>");</script>
The structure I want would be: html>body>div#outer>div#inner1+div#inner2
the structure I get is: html>body>(div#outer>div#inner2)+div#inner1
Look into the jquery documentation. Jquery is a javascript library that you include in your page header. It provides a ton of useful methods for working with the DOM. jQuery is my first choice for writing javascript these days. Straight up js just feels old school to me now. Knowing how to use jQuery effectively (or at least some js library) is a skill every web developer should have. jQuery provides methods like $('css-selector-here').append('what you want to insert'), .prepend(), .insertBefore(), insertAfter(), and .html(), among many others, one of which would probably suit your needs.
Here is a list of all the DOM manipulatuion methods: http://api.jquery.com/category/manipulation/