Javascript.RU

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

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

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

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

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

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

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

0

Автор: torbasow, дата: 11 июня, 2012 - 09:10
#permalink

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

А insertBefore — нет, не катит?


Автор: Гость (не зарегистрирован), дата: 7 сентября, 2012 - 00:14
#permalink

Где ссылка на описание функции insertBefore?
Нахрена мне ваши примеры...


Автор: Гость (не зарегистрирован), дата: 19 февраля, 2014 - 10:57
#permalink

так в том и фича разных сайтов, что можно неправильно написать статью, а найдутся комментаторы, которые предложат более лаконичное решение. гуглим insertBefore


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
2 + 15 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
seoneo
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum