1. ホーム
2. パソコン
3. javascript

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

投稿日 : 2023年09月01日 更新日 :

createElementとは？

createElementの使い方

const div = document.createElement("div");
document.body.appendChild(div);

クラスやid、その他属性、テキストを追加する

クラス、idを追加

const div = document.createElement("div");
div.classList.add("active");
div.id = "child";

その他属性を追加

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デモ

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】バッククォート内のドルマークの使い方 ` ${ } `

まとめ