Как вставить элемент перед элементом? Как вставить элемент после элемента?

Довольно сложно найти готовые примеры манипуляции элементами.

Вот например как взять элемент и вставить его перед другим элементом или взять элемент и вставить его после другого элемента?

Вот несколько примеров как можно манипулировать элементами:

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

<div>
<div>1</div>
<div onclick="before(this);">Вставить элемент перед этим элементом</div>
<div>2</div>
<div onclick="after(this);">Вставить элемент после этого элемента</div>
<div>3</div>
</div>

<div id="elem">текст</div>

<script type="text/javascript">

function after(th) {
$$('elem').$$after(th);
}

function before(th) {
$$('elem').$$before(th);
}

</script>

Посмотреть пример

Давайте теперь немного приукрасим наш пример:

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

<div>
<div>1</div>
<div onclick="before(this);">Вставить элемент перед этим элементом</div>
<div>2</div>
<div onclick="after(this);">Вставить элемент после этого элемента</div>
<div>3</div>
</div>

<div id="elem">текст</div>

<script type="text/javascript">

function after(th) {
$$('elem').$$after(th).$$('color','red').$$('Этот текст теперь за элементом');
}

function before(th) {
$$('elem').$$before(th).$$('color','blue').$$('Этот текст теперь перед элементом');
}

</script>

Посмотреть пример

Впрочем обращаться к элементу можно не только через this, а например по id или по ссылке

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

<div>
<div>1</div>
<div id="before">Вставить элемент перед этим элементом</div>
<div>2</div>
<div id="after">Вставить элемент после этого элемента</div>
<div>3</div>
</div>

<div id="elem">текст</div>

<script type="text/javascript">

var e1 = function(event){
	$$('elem').$$before('before');
}
$$e.add($$('before'),'click',e1);

var e2 = function(event){
	$$('elem').$$after('after');
}
$$e.add($$('after'),'click',e2);

</script>

Посмотреть пример

В последнем примере мы динамически назначили элементам обработчики событий
Более подробную информацию смотрите тут