добавление новых элементов по щелчку
Ребят, помогите! :help:
Нужно по щелчку(не однократно) добавить группу элементов. краткий пример кода:
<form action="" method="POST">
<input id="m" name="">
<br>
1. -
<input name="">
<input name="">
<input name="">
----------------------------------------------------------------------
добавить сюда...
----------------------------------------------------------------------
<input type="button" onclick="add">
</form>
и добавить нужно что то вроде этого: <br> 2. - <input name=""> <input name=""> <input name=""> Помогите!!!! Чет никак не могу сообразить...:write: |
<form action="" method="POST">
<input id="m" name="">
<div id="inputs">
<span>1. -</span>
<input name="">
<input name="">
<input name="">
</div>
<input type="button" onclick="add()" value="click!">
</form>
<script>
var count = 1;
function add() {
var div = document.createElement ('div');
div.innerHTML = ++count + '. - <input name=""> <input name=""> <input name="">';
document.getElementById('inputs').appendChild(div);
}
</script>
|
или
<form action="" method="POST">
<input id="m" name="">
<br>
1. -
<input name=""><input name=""><input name=""><input type="button" onclick="add(this)" value=" + ">
</form>
<script>
var count = 1;
function add(btn) {
var parent = btn.parentNode;
parent.insertBefore(document.createElement('br'), btn);
parent.insertBefore(document.createTextNode(++count + '. - '), btn);
parent.insertBefore(document.createElement('input'), btn);
parent.insertBefore(document.createElement('input'), btn);
parent.insertBefore(document.createElement('input'), btn);
}
</script>
|
Предложу такой вариант...
<!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">
#source {
display: none;
}
</style>
<script type="text/javascript">
function add(Obj){
var frm=Obj.parentNode;
var o=document.getElementById('source');
o=o.getElementsByTagName('div')[0].cloneNode(true);
var i=frm.getElementsByTagName('div').length;
o.getElementsByTagName('span')[0].innerHTML=i+1;
frm.insertBefore(o,Obj);
};
</script>
</head>
<body>
<form action="" method="POST">
<input id="m" name="">
<div>
<p><span>1</span>. - </p>
<input name="">
<input name="">
<input name="">
</div>
<input type="button" onclick="add(this);">
</form>
<div id='source'>
<div>
<p><span></span>. - </p>
<input name="">
<input name="">
<input name="">
</div>
</div>
</body>
</html>
|
супер!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Спасибо, очень оперативно))) :D
|
есть еще такая вещь как documentFragment()
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<form action = "" method = "POST">
<input id = "m" name = "">
<br>
1. -
<input name = "">
<input name = "">
<input name = "">
<input type = "button" onclick = "add()" value = 'More!'>
</form>
<script type = 'text/javascript'>
var i = 1;
function add() {
var form = document.getElementsByTagName('form')[0],
fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode(++i + '. - '));
fragment.appendChild(document.createElement('input'));
fragment.appendChild(document.createElement('input'));
fragment.appendChild(document.createElement('input'));
form.appendChild(fragment);
}
</script>
</body>
</html>
|
Arramis, маленько неправильно: кнопка остается после первого пункта! :no:
|
| Часовой пояс GMT +3, время: 08:41. |