特定の子要素を取得して複製したものを、同じ親要素内に追記させたい

Question

実現したいこと

特定の子要素を取得して複製したものを、同じ親要素内に追記させたいです。

発生している問題・分からないこと

元のHTMLから「images-A」の子要素を取得して、下記のようにしたいのですが、子要素を取得したところでつまずいています。追記したい内容は下記のようなHTMLの要素なのですが、なぜか「[object HTMLCollection]」と追記されてしまいます。

<div id="images-A" class="images">
    <div class="item item-01"><img src="item01.jpg"></div>
    <div class="item item-02"><img src="item02.jpg"></div>
    <div class="item item-03"><img src="item03.jpg"></div>
    <div class="item item-01"><img src="item01.jpg"></div>
    <div class="item item-02"><img src="item02.jpg"></div>
    <div class="item item-03"><img src="item03.jpg"></div>
</div>

該当のソースコード

<div id="images-A" class="images">
    <div class="item item-01"><img src="item01.jpg"></div>
    <div class="item item-02"><img src="item02.jpg"></div>
    <div class="item item-03"><img src="item03.jpg"></div>
</div>

$(function () {
  let element = document.getElementById("images-A");
  let elementChildren = element.children;
  element.after(elementChildren);
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

https://gray-code.com/javascript/duplicate-html-element/
上記のサイトを参考にコードを編集したりしましたが、うまくいきませんでした。

補足

特になし

Answer 1

• element.children は HTMLCollection で、after() の引数にそのまま書くことはできません。
• element.after() は element の後に追加します。element の子供の最後ではありません。
• DOMツリー操作は明示的にクローンしない限り、移動になります。

以下のような感じじゃないでしょうか。

const clonedChildren = [...element.children].map(c => c.cloneNode(true));
element.append(...clonedChildren);

Comments

[aDGDy02001]

ありがとうございます！理想としていた形になりました！

Answer 2

こうですかね？

let element = document.getElementById("images-A");
let elementChildren = element.cloneNode(true).children;
element.after(...elementChildren);

簡単にご説明すると、.childrenは要素を返さないです。HTMLCollectionという配列っぽいものを返します。
Element: children プロパティ - Web API | MDN

ところが、.after()の引数はノードを受取ります。
Element: after() メソッド - Web API | MDN
なので、要素の配列っぽいものをそのまま渡してもダメです。...で展開するなどして渡してください。

また、ノードや要素は一つの親しか持たないです。なので、.after()などで何かの要素の下に挿入すると、親が変わってしまいます。簡単に言うと、移動してしまいます。なので別のメソッドで事前にクローンをつくる必要があります。

Comments

[aDGDy02001]

解説までありがとうございます。おっしゃる通り、afterだと親要素が変わってしましました。勉強になりました。