「JavaScript」createElementメソッドで新しい要素を作成する
環境
Google Chrome 99.0.4844.51
関数
1.createElementメソッド
変数 = document.createElement(タグ名);
引数は、タグ名(P、divなど)を指定します。
戻り値は、新しい要素です。
2.createTextNodeメソッド
変数 = document.createTextNode(文字);
引数は、文字を指定します。
戻り値はテキストノードです。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cft">東京tokyo</div>
<p><input type="button" value="追加" onclick="AddBtn()"></p>
<script>
function AddBtn(){
// 新しいp要素を作成します
const newDiv = document.createElement("p");
//内容を設定します
const newContent = document.createTextNode("大阪oosaka");
// テキストノードを新規作成した div に追加します
newDiv.appendChild(newContent);
// DOM に新しく作られた要素とその内容を追加します
const currentDiv = document.getElementById("cft");
document.body.insertBefore(newDiv, currentDiv);
}
</script>
</body>
</html>
実行結果
「追加」ボタンを押すと、div要素「cft」の前にpタグ要素「大阪oosaka」が追加されます。