用JQuery实现在div1后追加多个有内容的div2，并实现div2里面的元素的id自增

问题如题，例如在div1后面追加多个有内容的div2，然后让追加的div2的id改变为div3，并且div2的标签

的id也变为h1_3,

标签的id变为h2_3
不知道有没有说清楚内容，请大神指点。

你好！

你好啊！

你很好啊！

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="jquery-3.3.1.js" type="text/javascript"></script>
    <script>
        var num = 1;
        function afterText() {
            num++;
            $('<div></div>').html($('#div1').html()).appendTo($('#div2')).find("[id]").attr("id",function (i,v) {return v.replace(/\d+/,num);});
        }
    </script>

    <body>
        <form action="" method="post">
            <input type="button" onclick="afterText()" value="添加DIV" />
            <div id="div1">
                <h1 id="a_1">你好</h1>
                <h2 id="b_1">xxxx</h2>
                <div id="c_1">
                    <p id="d_1">yyyyyy</p>
                    <span>ggggg</span>
                </div>
            </div>
            <div id="div2">
            </div>
        </form>

    </body>

</html>

是不是这样

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
</head>
<body>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<div>
    <div id="div1">
        <h1 id="h1_1">你好！</h1>
    </div>
</div>
<input type="button" value="添加" onclick="adddiv();" />
<script type="text/javascript">
var num = 1;
function adddiv() {
    num++;
    $("#div1").parent().append('<div id="div'+num+'"><h1 id="h1_'+num+'">你好啊！</h1><h2 id="h2_'+num+'">你很好啊！</h2></div>');
}
</script>
</body>
</html> 


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="jquery-3.3.1.js" type="text/javascript"></script>
    <script>
        function afterText() {
            $('<div></div>').html($('#div1').html()).appendTo($('#div2'));
        }
    </script>

    <body>
        <form action="" method="post">
            <input type="button" onclick="afterText()" value="添加DIV" />
            <div id="div1">
                <h1>你好</h1>
                <!--这里有很多个标签，我需要添加这些标签的id，有没有简便的方法
                    可以用最少的代码把这些标签的id自增地添加上，如果一个个添加那么
                    工作量太大了，写了很多个标签。
                -->
            </div>
            <div id="div2">
                <h1>你好啊！</h1>
            </div>
        </form>

    </body>

</html>

分两步走：第一步遍历拿到div1下的所有标签，第二步给所有标签循环增加id值
var num=1;
$("#div1 h1").each(function(){
$(this).attr("id",num);
num=num+1;
});
试一试，可不可以

你这个很简单 我给讲个思路 不会给你发代码 JQuery是可以继承的 ，你把这个直接继承了，然后继承方法成功之后 直接改了ID

思路大概是这样，先拿到div1里面的所有标签，然后然后进行循环通过arrt("属性",id)的方式进行id添加，声明一个变量，每循环一次id的值加1；
这是我的个人思路，我建议你试试我楼上的，应该是可以的

var rp=$(".div1").find("h1"); //有什么标签你就写什么标签
console.log(rp.length);
for(var i=0;i<rp.length;i++){
var k=1;
$(rp[i]).attr("id","a"+i);
}
可以试一试



 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增减购物车商品信息 </title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >
*{
    font-size:12px;
}

</style>
<script type="text/javascript">
var index=1;
$(document).ready(function(){
    index=$("table tr").length-1;
    //alert($("table tr").length);
    //删除class为.tr_0的<tr>元素
    /* $(".del").click(function () {
        $(".tr_0").remove();
    }); */

    //这种写法可以删除任意行，并可以为新增行自动绑定事件
    $(".del").live("click",function () {
        index--;
        $(this).parent().parent().remove();
    });

    $(".add").click(function () {
        //创建新节点
        index++;
        var $newPro = $("<tr>"  
        + "<td>"
            + index
        + "</td>"
        + "<td>"
            + "<input name='' type='checkbox' value='' />"
        + "</td>"
        + "<td>"
            + "<img src='images/computer.jpg'  class='products' />"
            + "<a href='#'>联想笔记本电脑</a>"
        + "</td>"
        + "<td>￥3189元</td>"
        + "<td>"
            + "<img src='images/subtraction.gif' width='20' height='20' />"
            + "<input type='text' class='quantity' value='1' />"
            + "<img src='images/add.gif' width='20' height='20' />"
        + "</td>"
        + "<td><a href='#' class='del'>删除</a></td>"
        + "</tr>");
        //在table中插入新建节点
        $("table").append($newPro);
    });

});

</script>
</head>
<body> 
<table border="1" cellpadding="0" cellspacing="0"> 
    <tr>
        <th><input type='checkbox' />全选</th>
        <th>商品编号</th>
        <th>商品信息</th>
        <th>宜美惠价</th>
        <th>数量</th>
        <th>操作</th>

    </tr>

    <tr class="tr_0">
        <td>
            1
           </td>
        <td>
            <input name="" type="checkbox" value=""/>
           </td>
           <td>
            <img src="images/sang.gif" class="products"/><a href="#">天堂雨伞</a></td><td>￥32.9元
           </td>
           <td>
                <img src="images/subtraction.gif" width="20" height="20"/>
            <input type="text" class="quantity" value="1"/>
            <img src="images/add.gif" width="20" height="20"/>
          </td>
          <td>
                <a href="#" class="del">删除</a>
          </td>
       </tr>
       <tr>
       <td>
           2
           </td>
        <td>
            <input name="" type="checkbox" value=""/>
           </td>
           <td>
            <img src="images/iphone.gif" class="products"/><a href="#">苹果手机iphone5</a></td><td>￥3339元
           </td>
           <td>
                <img src="images/subtraction.gif" width="20" height="20"/>
            <input type="text" class="quantity" value="1"/>
            <img src="images/add.gif" width="20" height="20"/>
          </td>
          <td>
                <a href="#" class="del">删除</a>
          </td>
       </tr>

 </table>

 <a href="#" class="add">添加</a>
 <a href="#">删除</a>
</body>
</html>

实现应该简单，就是问题没看懂，啥应用场景？
div1后追加多个有内容的div2：这里的div1与div2是相邻关系还是包含关系？
并实现div2里面的元素的id自增： div2 的所有孩子（子元素）的id自增？id的命名规则是什么？id=“id1”变成id=“id2”？

谢谢各位的帮忙！！感激不尽！！！