Javascript

要素の複製、 挿入をしてみよう

既に存在している要素を複製、挿入する方法について見ていきます。

  • cloneNode()
  • insertBefore()

cloneNode()

・要素を複製してDOMに追加する方法です。例えばitem0を複製してitem2の前に追加したい場合について考えて行きます。

・今回は少し複雑なので全体像を抑えておきましょう。まずはliのitem0を取得し、次にそれをコピーします。次にitem2の前に挿入したいので親要素であるulとitem2を取得し、その直前にコピーしておいたitem0を追加します。

・ではやり方を見ていきましょう。item0をコピーする必要があるのでquerySelectorAllを使ってitem0を取得します。const item0 = document.querySelectorAll('li’)[0];としてあげます。

・ item0 のコピーを作りたいので定数名をcopyとしつつ、 cloneNode() というメソッドを使います。このとき、中のテキストもコピーしたいのでtureとします。const copy = item0.cloneNode(true);と書いていけばいいでしょう。

insertBefore()

・そのうえで、 item 2 の前に挿入したいので、親要素と item 2 が必要なのでまずは取得してあげます。

・親要素はconst ul = document.querySelector('ul’);で取得してitem2はconst item2 = document.querySelectorAll('li’)[2];で取得しましょう。

・親要素に対して insertBefore() というメソッドを使って copy item2 の前に挿入と書いてあげます。ul.insertBefore(copy,item2);とするといいでしょう。

-Javascript