【javascript】HTML要素を生成させるcreateElementの使い方

createElementとは?
createElementを使うことによって、 新たにHTML要素を生成し、追加することができます。
jsonデータや連想配列のデータを、 新たに生成した要素に挿入し、表示させたり、 ゲームを作ったりすることができます。
createElementの使い方
ステップ1 : 変数を宣言する。 ここに生成されたHTML要素を格納させる。変数名は任意で。
ステップ2 : document.createElement("div")、 ダブルクオーテーションの中に、生成させたいタグを書く。
ステップ3 : 要素.appendChilde(変数)、 要素の子要素として生成される。
const div = document.createElement("div");
document.body.appendChild(div);
クラスやid、その他属性、テキストを追加する
クラス、idを追加
const div = document.createElement("div");
div.classList.add("active");
div.id = "child";
その他属性を追加
属性を追加する場合は、 setAttribute を使います。
const div = document.createElement("div");
div.setAttribute("onclick", "addHtml()");
iv.setAttribute("disable", "true");
参考

テキストを追加
const div = document.createElement("div");
div.textContent = "クリック"
sampleデモ
ボタンをクリックすると、div要素が追加されていきます。
const testWrapper = document.querySelector(".testWrapper");
const addBtn = document.querySelector(".addBtn");
let i = 1;
addBtn.addEventListener("click", ()=>{
const div = document.createElement("div");
div.textContent = `生成された要素${i}`;
testWrapper.appendChild(div);
i++;
});
参考

まとめ
- createElementでHTMLを生成
- appendChild()で、子要素として追加
- クラス、id、各種属性、テキストを追加できる
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク