Javascript

要素を追加してみよう

新しく要素を生成してDOMツリーに追加していく方法について見ていきます。

  • createElement()
  • appendChild()

createElement()

・ul要素に今3つのli要素があり、4つ目を追加したい場合、JSでやると3つのステップが必要になります。

・li要素を作る。中身のテキストを設定する。DOMツリーに追加する。の3ステップです。ここで最後に要素を追加したい場合、親要素に対して子要素の末尾に追加するという手法を使います。

・ボタンを押すとitem3が追加されるように設定します。

・まず li を作りたいので、定数名はitems にして、要素を作るには document.createElement() というメソッドを使います。要素の名前を文字列で入れれば良いので、今回だと li 要素なので li と入れてあげてください。

・これだけだと空の要素ができただけなので、 textContent を使って中身のテキストを設定してあげましょう。item3を追加したいのでitem3と書いておけばいいでしょう

appendChild()

・あとは DOM ツリーに追加すれば良いのですが、まずは親要素である ul 要素を取得しましょう。querySelector() を使います。

・ul は querySelector() に渡す要素名の文字列なので ul から変更できませんが、定数名のほうは何でも良いので要素名と同じにします。

・あとは ul の子要素の末尾に items3を追加すれば良いので appendChild() というメソッドを使ってあげてください。定数名のitemsを入れてあげましょう。

-Javascript