【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");参考
【javascript】属性を設定(setAttribute)、取得(getAttribute)、確認(hasAttribute)する
テキストを追加
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++;
});参考
【javascript】バッククォート内のドルマークの使い方 ` ${ } `
まとめ
- createElementでHTMLを生成
- appendChild()で、子要素として追加
- クラス、id、各種属性、テキストを追加できる
