html2canvasで作成されるcanvas要素の位置を変えたい

Question

html2canvasを使用してcanvas要素を作成できたのですが

<script src="script.js"></script>　

よりも下に作成されているので
$(".capture-btn-2").click(function() {
以下の処理が動作していないように思えます。canvas要素の位置はどうすれば変えられるでしょうか？

　　<script src="script.js"></script>
    <script src="formatter.js"></script>
    <script src="canvas.js"></script>
　　<canvas width="2892" height="12846" style="width: 964px; height: 4282px;" id="target"></canvas>
  </body>

  $(".capture-btn-1").click(function() {
    html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
　　$("canvas").attr("id","target");
    });
  });
  $(".capture-btn-2").click(function() {
    var canvas = document.getElementById("target");
    var dataURI = canvas.toDataURL();
    var image = document.getElementById("output");
    image.src = dataURI;
  });

Answer 1

<script src="script.js"></script>

よりも上に作成したいということにだけ反応すると

    <div id="canvascontainer"></div><!--  ★★★ この行を追加。 ★★★  -->
　　<script src="script.js"></script>
    <script src="formatter.js"></script>
    <script src="canvas.js"></script>
  </body>

のように <script src="canvas.js"></script> より上に追加する場所を用意しといて、

document.body.appendChild(canvas)

を

$('#canvascontainer').append(canvas)

のように変更すれば、良いのではないでしょうか？