javascriptダイナミックにinputを追加します.

2013年12月18日20:56:29
シーン:
大量に友情リンク機能を追加します.
各相互リンクには3つのフィールドが記録されています.名前、ハイパーリンク、並べ替え(order)
「追加」ボタンをクリックするたびに、3つのinputボックスを一度に生成し、異なるname値は上の3つの要素を記憶することができます.
提出する前に何回かクリックしてもいいです.つまり、複数のグループの友情リンク情報を生成して、一緒に提出しても互いに上書きできません.
html

1 <div id="friendlink" currentindex=""></div>

2 <input type="button" onclick="addlink();" value="  " />

js

 1 <script type="text/javascript">

 2 function addlink(){

 3     var x = 1;

 4     var linkdiv = document.getElementById("friendlink");

 5     if (linkdiv.attributes.currentindex.value) {

 6         var tmp = linkdiv.attributes.currentindex.value;

 7         x = parseInt(tmp) + 1;

 8     }

 9     linkdiv.setAttribute('currentindex', x);

10     

11     var yname = 'link[js'+x+'][name]';

12     var yurl = 'link[js'+x+'][url]';

13     var yorder = 'link[js'+x+'][order]';

14     

15         var input1 = document.createElement('input');

16         input1.setAttribute('type', 'text');

17         input1.setAttribute('name', yname);

18     

19         var input2 = document.createElement('input');

20         input2.setAttribute('type', 'text');

21         input2.setAttribute('name', yurl);

22     

23         var input3 = document.createElement('input');

24         input3.setAttribute('type', 'text');

25         input3.setAttribute('name', yorder);

26     

27         var br = document.createElement('br');

28     

29         linkdiv.insertBefore(input1,null);

30         linkdiv.insertBefore(input2,null);

31         linkdiv.insertBefore(input3,null);

32         linkdiv.insertBefore(br,null);

33 }

34 </script>

火狐の下でテストに成功しました.他のブラウザはテストしていません.
2014年5月22日09:57:04
カスタム属性を取得:
linkdiv.getAttribute()
linkdiv.setAttribute()