主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

動的Webページの作り方に関して3

                
tags:
JavaScriptでDOMにアクセスしてWebページにテキストや画像を追加する。もっとも簡単だと感じたのはinnerHTMLを使う方法だった。

<div id="nums">nums</div>

上記のdiv要素があったとする。ここに、xを変数として、<div id="x">x</div>を任意の数だけ追加したいとする。そうするとJavascriptは以下のように書けばいい。ちょっと力技っぽい書き方だけど。
funcion addNums(){
for (var x=0; x<5; x++){
el = '<div id="' + x + '">' + x + '</div>';
document.getElementById("nums").innerHTML += el;
}
}


これを実行すればidがnumsのdiv要素の中はテキスト"nums"を筆頭として、"<div id="0">0</div><div id="1">1</div>..."と追加されていく。

ここでそれぞれの<div id="x">x</div>にイベントを割り当てていきたいとする。わたしは最初、以下のように書いた(eventは適当なイベントとする)。

function event(num){
function inner(){
alert(num);
}
return inner;
}

function addNums(){
for (var x=0; x<5; x++){
el = '<div id="' + x + '">' + x + '</div>';
document.getElementById("nums").innerHTML += el;
document.getElementById(x).onclick = event(x);
}
}

これを走らせると、Webページ上でクリックした数字がアラートウィンドウで表示され...ない。4をクリックしたときだけは表示されるが。

なんで最後だけ?最後だけ...innerHTMLで"+="演算子を使ってコンテンツを追加していくと、追加を受ける側の中身はいったんクリアされているんではないだろうか。存在している部分の最後に追加されるのでなく、中身をコピーしておいてそこに追加し、document.getElementById("nums")の中身は新しいものとしてまるごと更新されると。

そうならば"innerHTML +="が行われる瞬間に、一周前のdocument.getElementById(x)は存在しなくなる。一周前のループでセットされたイベントは、IDに該当する要素が消えるので宙ぶらりんになる。innerHTMLによる更新がなくなる最後のループだけイベントが宙ぶらりんにならず動作する。

とすれば目的を達するスクリプトはどう書けばいいか。innerHTMLを使わずに、DOMのノードを追加していく方法で書いてみる。

function event(num){
function inner(){
alert(num);
}
return inner;
}

function addNums(){
for (var x=0; x<5; x++){
var el = document.createElement('div');
el.id = x;
el.value = x;
var textNode = document.createTextNode(x);
el.appendChild(textNode);
document.getElementById("nums").appendChild(el);
document.getElementById(x).onclick = event(x);
}
}


即興的な書き方だがうまくいった。ページ内に表示された0をクリックしたらアラートウィンドウで0、1をクリックしたら1、2は2...とイベントはしっかりセットされていた。


結論
div要素にただfor文などで繰り返しhtmlタグや文章、画像を追加したけりゃinnerHTMLを使う。同時にイベントをどんどん追加したければinnerHTMLは使わない。
IDを指定してイベントを追加するときは、そのIDに該当する要素が消える瞬間がないかを考える。
そもそもappendChildやcreateElement、createTextNodeをちゃんと使いましょうと。
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。