怎么点击一个按钮,然后在当前页面生成一个包含文本输入框和按钮的div

如何点击一个按钮,然后在当前页面生成一个包含文本输入框和按钮的div
本人刚入门小白。思路有限 而且语文表达能力不好 还望大大们耐心看看,帮忙出谋划策。

要求为
1,点击一个按钮A,然后在当前页面生成一个包含“文本输入框A”和“按钮B”的div
2,点击div里的“按钮B”可以在文本框A下再生成一个新的文本框B。

我一开始定义两个function分别对应两个按钮,然后通过用insertAdjacentHTML插入对应的元素。算是实现要求了

可是有个问题,就是编号问题。(后面涉及到数据存储,为方便需要编号)
div编号简单 var一个全局的变量 ,然后每次点击按钮 变量++就可以了。
但不同div里面的文本框编号是相互独立的,它的编号又该怎么弄?

本人非常菜 接触编程技巧有限,或许思路错了 或者 那位大大有更好的办法一起来讨论一下。

感激不敬


------解决方案--------------------
div以序号1,2,3等做ID;
div下的input可以考虑在div的ID基础上加个_1,_2,_3等的ID后缀

这样取div直接document.getElementById("序号");取input直接document.getElementById("div序号_input序号")
------解决方案--------------------
生成编号的变量多弄几个不同的起始数
------解决方案--------------------
input的id根据你容器div的id,再追加一个数字或其它是不是也可以
------解决方案--------------------


<html>
 <body>

 <div>
<button type="buttion"  onclick=doCreate($(this))>A-0</button>
 </div>

</body>
<script type="text/javascript" language="javascript">
  var index = 0;

function doCreate(obj){
index = index + 1;
var html= "";

html= "<div>"
+"<button type='button' value='' onclick=doCreate($(this)) >A-"+index+"</button>"
+"<input type='text' value='' />"
+"</div>";
obj.parent().append(html);
}

</script>
</html>