「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」が追加されます。