createElement javascript 入門

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);

よくやるミスとして大文字小文字等に注意して下さい。

あとメモ帳で環境がない方はミスがあってもどこまで

動いてるかわかりませんよね。

コンソールでもアラートでもいいですが仕込んでどこまで

動いてるか確認してみるのもいいかもしれません。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

Translate »