DOM操作の簡略化：
新しいNodeを作成
新しいElement NodeまたはText Nodeを作成する。
document.createElement('img') → $createNode('img','ELEM');
document.createTextNode('Hello') → $createNode('Hello','TEXT')
Value ①
Element Nodeを作成する場合はHTMLタグ名を渡す
Value ②
Text Nodeを作成する場合は文字列を渡す
String
作成するNodeの種類を文字列で指定 大文字・小文字で指定可能
ELEM = Element Nodeを作成 ・ TEXT = Text Nodeを作成
ELEM = Element Nodeを作成 ・ TEXT = Text Nodeを作成
●必須引数 ●オプション引数(省略可能)
記述例
$createNode('img', 'elem')
$createNode('Hello', 'TEXT')
戻り値
新しいNodeを返す。
動作サンプル
新しい<img>Nodeを作成して画像ファイルを設定し、既存の<img>Nodeと差し替える。
HTML :
<img id="photo1" src="images/pht_3.jpg" height="400" alt="花">
Javascript :
function sample1() {
//新しい<img>Nodeを作成
var newImgNode=$createNode("img","elem");
newImgNode.src="images/pht_4.jpg";
newImgNode.style.height="400px";
newImgNode.alt="蕾";
newImgNode.id="photo2";
//既存の<img>Nodeを取得
var nowImgNode=$id("photo1");
//<img>Nodeを入れ替える
$replace(newImgNode,nowImgNode);
}
新しいText Nodeを作成して、既存のNode内に追加する。
ここに文字列を追加する
HTML :
<div id="sample2">ここに文字列を追加する</div>
Javascript :
function sample2() {
//新しいText Nodeを作成
var newTextNode=$createNode(" → $createNode()で追加した文字列","TEXT");
//作成したText Nodeを差し込む親Nodeを取得
var aParentNode=$id("sample2");
//親NodeにText Nodeを追加する
aParentNode.appendChild(newTextNode);
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。