写了一段从网页取出数组再写回网页的代码，不知道错在哪里？烦请高手指正

写了一点简单的代码想实现从网页取出数组，再写回网页，但执行结果却不是我想要的，也不知道哪里出了错，烦请指正：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <Script>
       window.onload= function(){
           let i, A1, A2;
           A1 = document.getElementsByClassName("a1_1");
           A2 = document.getElementsByClassName("a2_1");
           for (i=0;  i < A1.length; i++){
               console.log(A1[i]);
               $(A2[i]).append(A1[i])
           }
       }
    </Script>

</head>
<body>
<div id="a1">
    <div class="a1_1">第一部分</div>
    <div class="a1_1">第二部分</div>
    <div class="a1_1">第三部分</div>
</div>
<p>abcdefghijklmn</p>
<div id="a2">
    <div class="a2_1"></div>
    <div class="a2_1"></div>
    <div class="a2_1"></div>
</div>
</body>
</html>

图片说明
上面这个图片显示执行结果和我想要的结果的差距。我这段代码哪里错了？应该怎么改，烦请高手指点一下，谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <Script>
       window.onload= function(){
           let i, A1, A2;
           A1 = document.getElementsByClassName("a1_1");
           A2 = document.getElementsByClassName("a2_1");
           for (i=0;  i < A1.length; i++){
              $(A2[i]).append(A1[i].textContent)
           }
       }
    </Script>

</head>
<body>
<div id="a1">
    <div class="a1_1">第一部分</div>
    <div class="a1_1">第二部分</div>
    <div class="a1_1">第三部分</div>
</div>
<p>abcdefghijklmn</p>
<div id="a2">
    <div class="a2_1"></div>
    <div class="a2_1"></div>
    <div class="a2_1"></div>
</div>
</body>
</html>

你获取到的是整个节点，放进去当然不行，要用textContent属性获取文本