nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

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

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

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

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


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


пример:
http://learn.javascript.ru/play/T2znCb

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


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


пример:
http://learn.javascript.ru/play/CMUJc

Впрочем обращаться к элементу можно не только через 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>


пример:
http://learn.javascript.ru/play/6iv8Y

В последнем примере мы динамически назначили элементам обработчики событий
Более подробную информацию смотрите http://scriptjava.net/documentation

Вас зовут:

Ваш комментарий:


Код на картинке: