appendChildメソッドとは

親要素
子要素1
子要素2
子要素3
appendアペンド:（訳）付け加える・追加・添付
code



  <style>  ------------------css----------------------------------------
    div {
      margin: 10px;
      padding: 10px;
      border: medium solid blue;
    }
  </style>


<body>------------------------html---------------------------------------
  <button onclick="addChildCreate()">子要素を追加(新規)</button><br>
  <button onclick="addChildCopy()">子要素を追加(コピー)</button><br>
  <button onclick="addChildExist()">子要素を追加(既存要素)</button><br>
  <div id="parent">親要素
    <div id="child1">子要素1</div>
    <div id="child2">子要素2</div>
    <div id="child3">子要素3</div>
  </div>
 
       
         ----------------------javascript-----------------------------

 <script type="text/javascript">
    var parent = document.getElementById("parent");
    var idx = 4;

    // 子要素を追加(新規)
    function addChildCreate() {
      var child = document.createElement("div");
      addChild(child);
    }

    // 子要素を追加(コピー)
    function addChildCopy() {
      // 先頭の子要素をコピーする
      var child = document.getElementById("parent").firstElementChild.cloneNode(true);
      addChild(child);
    }

    // 子要素を追加(既存の要素)
    function addChildExist() {
      // 先頭の子要素を取得する
      var child = document.getElementById("parent").firstElementChild;
      addChild(child);
    }

    // 子要素を追加(共通)
    function addChild(child) {
      child.id = "child" + idx;
      child.innerText = "子要素" + idx;
      idx++;
       child = parent.appendChild(child);
      console.log(child);
    }
 </script>
</body>
</html>