【JavaScript 練習講座】DOMを追加する
[JavaScript 練習講座]DOMを追加する
本講座では、HTMLタグに別のタグを追加する方法を学習する。
olタグの子要素として、liタグを追加する
特定のHTMLタグを、別のHTMLタグへ追加するサンプルプログラムを掲載する。
001<html><head>
002<script>
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
013}
014</script>
015</head>
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test"></ol>
019</body>
020</html>
002<script>
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
013}
014</script>
015</head>
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test"></ol>
019</body>
020</html>
Click
Webブラウザでファイルを開くと、Clickリンクが表示する。 ここで、Clickリンクをクリックする。
Click
1.
1.
このようになる。もう一度Clickリンクをクリックする。
Click
1.
2.
1.
2.
Clickリンクをクリックするたびに、数字が増えていく。 この動作をするプログラムを作成する。
HTMLを確認する。
Clickリンクと、olタグがある。 olタグの子要素は存在しない。 そのため、画面の初期表示に、olタグは表示しない。
プログラムの処理を解説する。 Clickリンクをクリックするたびに、olタグにliタグを追加する処理をする。 これが全体的な処理である。
詳細に解説する。まずolタグに注目する。olタグにid属性が設定されている。 id属性の値は「test」である。 olタグにliタグを追加する処理をJavaScriptで行なうので、 JavaScriptでolタグのオブジェクトがほしい。 そのため、まずolタグにidを設定する。 そしてJavaScriptでidを指定して、olタグオブジェクトを取得する。 さて、Clickリンクをクリックすると、clickLink()関数が実行する。
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
013}
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
013}
6行目で、liタグを新規作成する。
タグを作成する方法 document.createElement ( [タグ名] ) ;
documentオブジェクトのcreateElement()関数を実行すると、 タグを新規作成する。タグの種類はcreateElement()関数の引数で指定する。 プログラムの6行目で、
006 var li = document.createElement ( "li" ) ;
このように記述している。このプログラムは、liタグを作成して変数liに代入している。
var p = document.createElement ( "p" ) ;
仮にこの様に書くならば、 このプログラムは、pタグを新規作成して変数pへ代入するプログラムである。
解説へ戻る。
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
013}
014</script>
015</head>
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test"></ol>
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
013}
014</script>
015</head>
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test"></ol>
9行目で idが「test」のタグを取得して、変数olに代入する。 idが「test」のタグは、18行目のolタグである。 18行目のolタグのオブジェクトが、変数olに入る。 12行目で、olタグにliタグを追加する。
タグを子要素として追加する方法 親タグ.appendChild ( 子タグ ) ;
あるタグを親タグとして、特定のタグを子要素として追加する場合、 appendChild () 関数を利用する。
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[ol]タグに[li]タグを追加
012 ol.appendChild ( li ) ;
12行目で、olタグにliタグを追加する。 この処理を実行すると、olタグ直下にliタグが表示する。
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test"><li></li></ol>
019</body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test"><li></li></ol>
019</body>
18行目のolタグにliタグが追加された。 clickLink()関数の処理は以上で終了である。
さて、Clickリンクをクリックするたびに、 clickLink()関数が実行する。 clickLink()関数で、liタグを新規作成して、 olタグへ追加していく。
016<body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test">
019 <li></li>
020 <li></li>
021 <li></li>
022 <li></li>
023 </ol>
024</body>
017 <a href="javascript:clickLink()" >Click</a>
018 <ol id = "test">
019 <li></li>
020 <li></li>
021 <li></li>
022 <li></li>
023 </ol>
024</body>
Clickリンクをクリックするたびに、このようにliタグが追加される。
Click
1.
2.
3.
4.
1.
2.
3.
4.
liタグに文字列を表示させた後、olタグへ追加
liタグをolタグに追加するプログラムを学習した。 こんかい、liタグに文字列を追加するプログラムを見る。 特に目新しいことはないが、JavaScriptの練習として思って見てほしい。
001<html><head>
002<script>
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[li]タグに文字を追加
009 li.textContent = "Hello" ;
010
011 //[ol]タグを取得
012 const ol = document.getElementById ( "test" ) ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
017</script>
018</head>
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ></ol>
022</body>
023</html>
002<script>
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[li]タグに文字を追加
009 li.textContent = "Hello" ;
010
011 //[ol]タグを取得
012 const ol = document.getElementById ( "test" ) ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
017</script>
018</head>
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ></ol>
022</body>
023</html>
Click
Webブラウザでファイルを開くと、Clickリンクが表示する。
Click
1.Hello
2.Hello
3.Hello
1.Hello
2.Hello
3.Hello
Clickリンクをクリックするたびに、文字列「Hello」が次々に表示する。
全体の処理を解説する。
まずClickリンクをクリックするとJavaScriptの関数が実行する。
関数で、olタグにliタグを追加する。
liタグには、文字列「Hello」を記述する。
以上が全体の処理である。
前回のサンプルとほとんど同じなので、触れるように詳解する。
20行目でClickリンクを表示して、 21行目でolタグを作る。 olタグをJavaScriptで利用するため、olタグにid属性を設定する。 id属性の値は「test」とした。
Clickリンクをクリックすると、clickLink()関数が実行する。
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[li]タグに文字を追加
009 li.textContent = "Hello" ;
010
011 //[ol]タグを取得
012 const ol = document.getElementById ( "test" ) ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[li]タグに文字を追加
009 li.textContent = "Hello" ;
010
011 //[ol]タグを取得
012 const ol = document.getElementById ( "test" ) ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
6行目でliタグを新規作成し、変数liへ代入する。 9行目でliタグに文字列「Hello」を設定する。
タグに文字列を表示する タグオブジェクト.textContent = [文字列] ;
タグに文字列を表示する場合、表示する文字列を textContentプロパティへ設定する。
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[li]タグに文字を追加
009 li.textContent = "Hello" ;
010
011 //[ol]タグを取得
012 const ol = document.getElementById ( "test" ) ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
006 var li = document.createElement ( "li" ) ;
007
008 //[li]タグに文字を追加
009 li.textContent = "Hello" ;
010
011 //[ol]タグを取得
012 const ol = document.getElementById ( "test" ) ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
12行目で、idの値がtestのタグを取得して変数olへ代入する。 idがtestのタグはolタグである。変数olへolオブジェクトが代入される。 15行目でolタグにliタグを追加する。 liタグには文字列「Hello」が設定されていた。
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ><li>Hello</li></ol>
022</body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ><li>Hello</li></ol>
022</body>
21行目のolタグにliタグが追加された事を確認できる。 ClickリンクをクリックするたびにclickLink()関数が実行して、 olタグにliタグが追加される。
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" >
022 <li>Hello</li>
023 <li>Hello</li>
024 <li>Hello</li>
025 </ol>
026</body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" >
022 <li>Hello</li>
023 <li>Hello</li>
024 <li>Hello</li>
025 </ol>
026</body>
Click
1.Hello
2.Hello
3.Hello
1.Hello
2.Hello
3.Hello
解説は以上である。
DOMの子要素の数を取得する
001<html><head>
002<script>
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
017</script>
018</head>
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ></ol>
022</body>
023</html>
002<script>
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
017</script>
018</head>
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ></ol>
022</body>
023</html>
Click
Webブラウザでファイルを開くと、Clickリンクが表示する。
Click
1.Hello 0
1.Hello 0
Clickリンクをクリックすると、文字列「Hello」の後ろに数字がつく。
Click
1.Hello 0
2.Hello 1
3.Hello 2
4.Hello 3
1.Hello 0
2.Hello 1
3.Hello 2
4.Hello 3
Clickリンクをクリックするたびに、語尾の数字が加算されていく。
全体的な処理を解説する。 Clickリンクをクリックすると、olタグにliタグが追加される。 liタグに表示する文字列は、 文字列「Hello」と数字を文字列結合したものとする。 数字は、olタグの子要素の数とする（新しいliタグを追加する前の、liタグの数）。
では、詳解する。
21行目のolタグに「id=test」を設定する。 olタグをJavaScriptで利用するからである。 さて、Clickリンクをクリックすると、clickLink()関数が実行する。
003function clickLink () {
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
004
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
016}
6行目でliタグを作成して変数liへ代入し、 9行目でidがtestのタグを取得して変数olへ代入する。 12行目で、文字列「Hello」と
ol.childNodes.length
この実行結果を文字列結合して、liタグのtextContentプロパティへ設定する。
タグの子要素を取得する タグオブジェクト.children
タグの子要素を全て取得する場合、childrenプロパティを利用する。 これとは別に、他にも取得方法がある。覚える必要はない。 必要に応じてネットで調べてほしい。
タグのオブジェクトのchildrenプロパティには、 子要素が配列のような形（配列ではないが今後、「配列」と表記）で入っている。
HTMLのタグは、olタグのように、複数の子要素を持つ事ができる。 そのため、タグの子要素を示すchildrenプロパティには、 （複数のオブジェクトを保持できる）配列が入っている（本当は配列ではない）。
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
12行目を解説する。olタグのchildrenプロパティで子要素を取得した後、 lengthを利用している。これは、子要素が入った配列のサイズ（子要素の数）が 入っているプロパティである。
タグの子要素の数を取得する タグオブジェクト.children.length
タグの子要素の数を取得するプログラムである。 他にも方法がある。各自ネットで調べてほしい。 さて今現在、HTMLに記載されたolタグの子要素は無い。 つまり、
ol.children.length ;
この値は「0」である。
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + 0 ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + 0 ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
このように、置き換える事ができる。 15行目で、olタグにliタグを追加する。 プログラムを実行すると、olタグにliタグが表示する。
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ><li>Hello 0</li></ol>
022</body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" ><li>Hello 0</li></ol>
022</body>
21行目のように、liタグが追加される。さて、この状態でもう一度Clickリンクをクリックしてみよう。
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + ol.children.length ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
Clickリンクをクリックすると、 clickLink()関数が実行する。12行目に注目する。 前回clickLink()関数が実行した時、olタグにliタグを追加した。 つまり、olタグの子要素の数は「1」である。 12行目の、
012... ol.children.length ;
この値は「1」である。
005 //[li]タグを作成
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + 1 ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
006 var li = document.createElement ( "li" ) ;
007
008 //[ol]タグを取得
009 const ol = document.getElementById ( "test" ) ;
010
011 //[li]タグに文字を追加
012 li.textContent = "Hello " + 1 ;
013
014 //[ol]タグに[li]タグを追加
015 ol.appendChild ( li ) ;
12行目は、このように置き換わる。 clickLink()関数が実行すると、olタグに新しいliタグが追加される。
019<body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" >
022 <li>Hello 0</li>
023 <li>Hello 1</li>
024 </ol>
025</body>
020 <a href="javascript:clickLink()" >Click</a>
021 <ol id = "test" >
022 <li>Hello 0</li>
023 <li>Hello 1</li>
024 </ol>
025</body>
olタグに二つ目のliタグが追加される。解説は以上である。
まとめ
タグを作成する方法 document.createElement ( [タグ名] ) ;
タグを追加する方法 親タグ.appendChild ( 子タグ ) ;
タグの子要素を取得する タグオブジェクト.children
