createElement()メソッド
■ オブジェクト変数 = document.createElement("HTMLエレメント名")
・引数で指定したHTML要素名のエレメントノードを生成し、その要素ノードオブジェクトが返されます。
・ページ上に生成したエレメントノードを表示するには、appendChild()メソッドやinsertBefore()メソッドなどを
使ってノードをページ上のエレメントノードに挿入する必要がある。
Sample
■ オブジェクト変数 = document.createElement("HTMLエレメント名")
・引数で指定したHTML要素名のエレメントノードを生成し、その要素ノードオブジェクトが返されます。
・ページ上に生成したエレメントノードを表示するには、appendChild()メソッドやinsertBefore()メソッドなどを
使ってノードをページ上のエレメントノードに挿入する必要がある。
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function Ikomayama(){
var oya_box = document.getElementById("box");
//既に作成済なら何もしない（ボタンが繰り返し押される場合の対策)
if(document.getElementById("box2")!=undefined) return false;
var elem_box = document.createElement("div"); //div要素を生成
elem_box.id = "box2";
elem_box.setAttribute("style", "width:400px;color:red;border:1px
solid navy");
elem_box.innerHTML = "生駒山山頂から";
oya_box.appendChild(elem_box); //生成したdiv要素を親要素に挿入
var img = document.createElement("img"); //画像img要素を生成
img.src = "../../yama/ikoma/ikoma25.jpg"; //img.setAttribute("src",
"../../yama/ikoma/ikoma25.jpg")でも可
elem_box.appendChild(img); //img要素をdiv要素の最後に挿入
var span = document.createElement("span"); //span要素を生成
span.setAttribute("style","font-size:12px;color:navy");
text = "大阪市内が一望できる。今日は曇ってて写真では分りにくいが、梅田周辺の高層ビル群や日本一高い「阿倍野
ハルカス」が見える。晴れた日は絶景だろうナ。淡路島、六甲連山、四国まで眺められるかも。";
span.appendChild(document.createTextNode(text)); //span要素にテキストノードを挿入
elem_box.appendChild(span); //span要素をdiv要素の最後に挿入
elem_box.appendChild(document.createElement("br")); //改行の挿入
var link = document.createElement("a"); //リンク要素<a>を生成
link.setAttribute("href","../../yama.html");
link.setAttribute("target","_top");
link.appendChild(document.createTextNode("詳しくはここを参照"));
elem_box.appendChild(link); //<a>要素をdiv要素の最後に挿入
}
//--></script>
</head>
<body>
<button onclick="Ikomayama()">生駒山の紹介</button>
<div id="box"></div>