createElement javascript 入門
createElement
createElementは要素を追加します。
document.createElement(“追加したい要素”);
createTextNode
createTextNodeはテキストノードを追加します。
document.createTextNode(“文字列文字列”);
appendChild
appendChildは要素に親子関係を紐づけてやります。
追加しただけではどこに追加したらいいかわかりませんよね。
親要素.appendChild(子要素);
サンプルソース
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
var p = document.createElement(“p”);
var text = document.createTextNode(“追加されました。”);
p.appendChild(text);
var setbody = document.body;
setbody.appendChild(p);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>
実行結果はクリックするたびに追加されました。と表示されます。
サンプルソースの解説
変数pにp要素の要素を新規に追加してます。
var p = document.createElement(“p”);
変数textにテキストノードを新規に追加してます。
var text = document.createTextNode(“追加されました。”);
変数pに変数textを紐づけてます。
p.appendChild(text);
変数setbodyにbodyを追加。
var setbody = document.body;
変数setbodyに変数pを紐づけ。
setbody.appendChild(p);
よくやるミスとして大文字小文字等に注意して下さい。
あとメモ帳で環境がない方はミスがあってもどこまで
動いてるかわかりませんよね。
コンソールでもアラートでもいいですが仕込んでどこまで
動いてるか確認してみるのもいいかもしれません。