createTextNode()メソッドでテキストノードの生成
■ document.createTextNode("文字列")
・引数で指定したテキスト（文字列）を持った文字列オブジェクト(テキストノード)を生成 する
・生成したテキストノードはappendChild()メソッドやinsertBefore()メソッドなどを使ってページ上のノードに挿入する
Sample 1
関西の選択リストを する
Sample 2 「人生の名言集」
ボタンをクリックすれば･･･→
■ document.createTextNode("文字列")
・引数で指定したテキスト（文字列）を持った文字列オブジェクト(テキストノード)を生成 する
・生成したテキストノードはappendChild()メソッドやinsertBefore()メソッドなどを使ってページ上のノードに挿入する
関西の選択リストを する
ボタンをクリックすれば･･･→
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function AddOption(){
kansai = new Array("京都","大阪","兵庫","奈良","滋賀","和歌山");
var oya = document.getElementById("frm"); //親ノードになるフォーム要素
if(document.getElementById("fuken")!=undefined) return false; //既に選択リストが作成済なら何もしない
var se = document.createElement("select"); //select要素を作成
se.setAttribute("id","fuken"); //select要素のid属性を作成
for(i=0;i<kansai.length;i++){ //select要素にoption要素を配列分だけ追加していく
var opt = document.createElement("option");
opt.setAttribute("value", kansai[i]); //optionのvalue値を配列から設定
opt.appendChild(document.createTextNode(kansai[i])); //optionにテキストノードを配列から追加
se.appendChild(opt);
}
oya.appendChild(se); //完成したselect要素をフォームに挿入
}
var num = 0;
str = new Array(); //名言の配列
str[0] = "人生は道路のようなものだ。 一番の近道は、たいてい一番悪い道だ(フランシス・ベーコン)";
str[1] = "生きるとは呼吸することではない。行動することだ(ジャン＝ジャック・ルソー)";
str[2] = "人生は一箱のマッチに似ている。重大に扱うのはばかばかしい。重大に扱わねば危険である(芥川 龍之介)";
str[3] = "人生はクローズアップで見れば悲劇 ロングショットで見れば喜劇(チャーリー・チャップリン)";
str[4] = "私は豚となって楽しむより、人となって悲しみたい(ソクラテス)";
str[5] = "人の不幸の大半は、過去を顧みることで発生する(ジョセフ・ジューベル)";
str[6] = "(お終い）";
function Next(){
if(num < 7){ //配列の最後で終了にする
var show_box = document.getElementById("box");
if(show_box.firstChild)show_box.removeChild(show_box.firstChild); //子ノードがあれば削除する
show_box.appendChild(document.createTextNode(str[num])); //配列からテキストノードを生成する
num++;
}else{alert("終了しました！");}
}
//--></script>
</head>
<body>
<form><select id="sele" size="1"></select></form>
<p><button onclick="AddOption()">メニューの追加</button> </p>
<h5 class="sample">Sample 2 「人生の名言集」</h5>
<p>ボタンをクリックすれば･･･→<button onclick="Next()">次の名言を表示</button> </p>
<div id="box" style="width:600px;font:bold 12px 'ＭＳ 明朝';color:red;border:1px
solid green;padding:6px"></div>