Получить доступ к "почти соседнему" элементу через target

[revvo]

Есть форма с такой структурой полей

<dl>
	<dt><label for="phone">Phone</label><span class="add-link" style="margin-left:213px" onclick="addField()">add</span></dt>
	<dd><input type="text" id="phone" class="long-input" name="phone" /></dd>
	<dt><label for="email">Email</label><span class="add-link" style="margin-left:219px" onclick="addField()">add</span></dt>
	<dd><input type="text" id="email" class="long-input" name="email" /></dd>
</dl>

<span> здесь - это ссылка-кнопочка при нажатии на к-рую будет добавляться еще одно поле ниже, т.е. я хочу добавлять еще один <dd>. Опыт в js совсем небольшой, поэтому не уверен как лучше это сделать. Появилась идея заюзать target, передавая в параметре event. Но в функцию попадет указатель на span, т.е. нужно вернутся на уровень выше, в dt. От него перейти к следующему соседу (dd), но не просто к следующему, а к последнему (вперед лепить нельзя, т.к. первое поле может уже быть заполнено), и после него добавить еще один dd. Можно ли такое замутить, и если можно то как? (На чистом js).

p.s. Если лень писать код, дайте хотя бы методы к-рые мне потребуются. Спасибо.

[ksa]

Но в функцию попадет указатель на span, т.е. нужно вернутся на уровень выше

Ссылка на родительский элемент хранится в

[ oElement = ] object.parentNode

revvo, я не совсем понял... Ты к одному ДТ хочешь приляпать несколько ДД?
Они же вроде парой ходят как крабы... Даже теперешнее их использование у тебя странно. Ну не похоже оно на "термины" и их "определения".

[revvo]

Вроде это же не запрещено (несколько <dd> определений к одному <dt> термину). А что не запрещено, то разрешено, тем более браузеры отображают без проблем

А почему я выбрал этот способ, они блочные элементы, а у меня в этой форме сложная верстка. С блочными удобно работать и обертки не нужны.

За ответ спасибо, буду копать. А как прилепить в нужное место dd? Если его просто тупо добавить к dl списку, то он в самый конец по идее пойдет. Можно ли сделать insert в нужное место?

P.S. Еще идея возникла передавать в функцию id <dd> элемента, но если динамически потом добавлять их, то он будет первым из них, а добавлять надо в конец...

[revvo]

Написал я скрипт, в принципе делает что надо

function addField(event) {
			var x = event.target.parentNode;
			//var l = x.getElementByTagName('label'); //тут подвисает
			var y = x.nextSibling;
			while (y.nodeName == "DD" || y.nodeType == 3) y = y.nextSibling;
			var e = document.createElement('dd');
			e.innerHTML = '<input type="text" class="long-input" name="js-field" title="generated" />';
			y.parentNode.insertBefore(e, y);
		}

Но, захотел я получить текст из label, а тут облом. Не могу понять, почему-то подвисает в закомментированном месте.

[рони]

Добавьте красное

x.getElementByTagName('label')[0]

[ksa]

А почему я выбрал этот способ, они блочные элементы

ДИВы например не менее блочны...

Можно ли сделать insert в нужное место?

Нужно таки правильно определиться с местом...

у меня в этой форме сложная верстка

Что-то мне подсказывает что выбраное тобой не соответствует твоей же задаче...

Альтернативный вариант разметки.

<div>
	<div>
		<p><label for="phone">Phone</label><span class="add-link" style="margin-left:213px" onclick="addField()">add</span></p>
		<div>
			<input type="text" id="phone" class="long-input" name="phone" />
		</div>
	</div>
	<div>
		<p><label for="email">Email</label><span class="add-link" style="margin-left:219px" onclick="addField()">add</span></p>
		<div>
			<input type="text" id="email" class="long-input" name="email" />
		</div>
	</div>
</div>

В моём варианте место добавления обозначено абсолютно четко.

[Vulkan]

Вот так правильно будет:

var l = x.getElementsByTagName('label')[0];

[revvo]

Что-то мне подсказывает что выбраное тобой не соответствует твоей же задаче...

Ок, давайте подумаем логически. Кроме семантики, какая разница что использовать? Один хрен это блоки всё. Кроме того, я даже вижу в этом плюс, там вокруг этого кода и так все дивами обложено, а так визуально легче находить эти инпуты.

Кстати придумал этот способ верстки форм не я, я это вычитал у кого-то. Там было нескольких способов, я немного подумал, и выбрал этот А вообще проблему решили блоки как таковые, а то у меня до этого разъезжалось всё, кто куда, в каждом браузере по своему.
И еще где-то вчера читал (перед выбором этого способа, я все же немного погуглил), что даже в W3C приведен пример использования dl списка не совсем по назначению, т.е. даже они ничего плохого в этом не видят.

В предложенном вами способе тоже вижу плюс, дополнительная обертка для пары лейбел-инпут, к-рая больше упорядочивает (недостаток у dl - это общий родитель у всех). Но переделывать я уже не буду

[ksa]

Кроме семантики, какая разница что использовать?

А этого мало? Тогда можно добавить что я такое не одобряю...

Один хрен это блоки всё

Хрен-то один... Вот только размеры разные (с) Да и для браузера это таки разные хреновины...

так визуально легче находить эти инпуты

Некоторые люди для этого используют отступы и коментарии...

Но переделывать я уже не буду

Хозяин - барин...

[Kolyaj]

Кроме семантики, какая разница что использовать?

У div-ов нет предопределённых стилей, влияющих на отображение, в отличие от dl/dt/dd.