Вставить элемент на определенное место
Добрый день.
существует вот такая конструкция:
<form mothod="post" action="admin.php" id="forma">
<div><input type="text" id="id_1"></div>
<div><input type="text" id="id_2"></div>
<a href="#" onClick="addProperty()">Добавить</a>
</form>
Задача состоит в том чтобы по клику вставлялся еще один <div><input type="text" id="id_3"></div> Но вставлялся после второго дива: т.е. получалось бы так:
<form mothod="post" action="admin.php" id="forma">
<div><input type="text" id="id_1"></div>
<div><input type="text" id="id_2"></div>
<div><input type="text" id="id_3"></div>
<a href="#" onClick="addProperty()">Добавить</a>
</form>
function addProperty() {
var form = event.target.parentNode;
while (!(form instanceof HTMLFormElement)) {
form = form.parentNode;
}
var elem = document.createElement('div');
elem.style.border = '1px solid #ff0000';
elem.innerHTML = 'blablabla';
form.appendChild(elem);
}
как указать позицию дочернего элемента? Может быть взять все дочерние элементы, и с помощью массива переставить местами последний(elem) и предпоследний элемент(<a></a>)? |
Цитата:
<form mothod="post" action="admin.php" id="forma">
<div id='container'>
<div><input type="text" id="id_1"></div>
<div><input type="text" id="id_2"></div>
</div>
<a href="#" onClick="addProperty()">Добавить</a>
</form>
Т.о. просто добавляя элемент в #container ты получаешь нужный эффект. :) |
Спасибо, все получилось так как хотел! +
|
bpystep, но можно сделать и на твоей конструкции... :D
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function addProperty() {
var of=document.getElementById('forma');
var all=of.getElementsByTagName('div').length;
var oa=of.getElementsByTagName('a')[0];
var od=document.createElement('div');
var o=document.createElement('input');
o.type='text';
o.id='id_'+(++all);
od.appendChild(o);
of.insertBefore(od,oa);
}
</script>
</head>
<body>
<form mothod="post" action="admin.php" id="forma">
<div><input type="text" id="id_1"></div>
<div><input type="text" id="id_2"></div>
<a href="#" onClick="addProperty()">Добавить</a>
</form>
</body>
</html>
|
Спасибо что потраченное время, но мне очень хорошо подходит вариант с контейнером, просто и понятно, и получилось все универсально (под другие скрпты хорошо подошло).
|
Цитата:
|
| Часовой пояс GMT +3, время: 07:12. |