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

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

さて前回は基準となる要素を見つけることができたので、次は新しい要素を追加していきましょう。
4 番目の li を作ってみましょう。

JavaScriptを使って動的にDOM要素を作成、属性を設定したのちに、文書に追加してみます。

  • createElement
  • createTextNode
  • appendChild
  • 属性の設定
2013年9月9日
DOM操作には appendChild があれば removeChild もあります。

element.removeChild - DOM | MDN
https://developer.mozilla.org/ja/docs/DOM/element.removeChild

これはある要素から特定の子要素を取り除くというメソッドです。

firstChild という最初の子要素を返すプロパティと組み合わせると、ある要素内のすべての子要素を取り除く処理は、次のようなコードで書くことができます。

var element = document.getElementById('hoge');
while (element.firstChild) {
    element.removeChild( element.firstChild );
}
2013年9月9日
jQuery を勉強していると、JavaScript の appendChild() と jQuery の append() の違いに戸惑うかもしれません。

JavaScript の appendChild() は jQuery の append() と違って、返り値が「追加される子要素」になります。

// 変数 li には fourthLi が格納される
var li = mylist.appendChild(fourthLi);

ですので、以下のように書いてしまうと意図しない結果になってしまいます。

// これだと最終的に fourthText だけ mylist に append されてしまう
mylist.appendChild(
  fourthLi.appendChild(
    fourthLink.appendChild(fourthText)
  )
);

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

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

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

詳しい説明を読む

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

詳しい説明を読む

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

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

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