× 無料のユーザー登録をすると学習状況を管理することができるようになります
最新版のレッスンはこちらから » 【最新版】JavaScript入門 (全24回)

#24 DOM要素を動的に追加してみよう (2)

さて次はこの 4 番目の要素の下に 5 番目の要素を作りたいと思います。
同じように作っていっても良いのですが、cloneNode という便利な命令があるのでそれを見ていきましょう。

さらにDOM要素を複製し、任意の場所に追加する方法について学びます。

  • cloneNode
  • insertBefore
2013年9月9日
なお、insertBefore()があればinsertAfter()もありそうですが、実は存在しません。
これはinsertBefore()を次のように使えばinsertAfter()と同じように使えるためです。
親要素.insertBefore(挿入したい要素, ターゲットとなる要素.nextSibling);
.nextSiblingは「同列にある次の要素(Siblingは兄弟の意味)」を指します。
こう書くことで「ターゲットとなる要素の次の要素の前に挿入する=ターゲットとなる要素のあとに挿入する」になります(少しややこしいですが)。
insertBefore()と.nextSiblingをうまく使って望むとおりの操作をできるようにしておきましょう。
またこのあたりは以下にも詳しいのでご参考までに。
https://developer.mozilla.org/ja/docs/DOM/Node.insertBefore

このレッスンの問題を報告する

この動画に関する、よくある質問はまだありません。

プレミアム会員(月額980円)になると、全レッスンの素材ファイルをダウンロードできます。

詳しい説明を読む

プレミアム会員(月額980円)になると、全レッスンのソースコードを見られるようになります。

詳しい説明を読む

このレッスンの問題を報告する

プレミアム会員(月額980円)になると、全レッスンのデモを見られるようになります。

詳しい説明を読む
先生に質問してみよう (試験運用中)