DOM作成時に、属性もセットできる関数

DOM作成時に、属性もセットできる関数

document.createElementメソッドとObject.keysを組み合わせて、DOM作成時に、属性もセットできる関数を作ってみました。かなりニッチだと思うのですが、どうしてもJavaScriptでたくさん要素を作らなきゃいけない、という時は使えそうな関数です。

DOM作成時に、クラス名やid属性もセットできる関数を作る

まず、普通に関数使わないで書いたものはこちら。

    const loadingImg       = document.createElement('img');
    loadingImg.id          = "js-loading";
    loadingImg.class       = "loading";
    loadingImg.src         = "img/loading-circle.gif";
    loadingImg.alt         = "ローディング画像";
    loadingImg.textContent = "ローディング中です";

関数がやってること

  • createElementして要素の作成
  • Object.keysでループ処理をしてsetAttributeで属性を作成
  • textContentでテキストを作成
const createAttributedElements = ({tag,attrObj,str}) =>{
    const element = document.createElement(tag);
    Object.keys(attrObj).forEach((attribute) => {
        element.setAttribute(attribute, attrObj[attribute]);
    });
    if(str !== undefined) element.textContent = str;
    return element;
}

const loadingImg = createAttributedElements({
   tag:"img",
      attrObj:{
      id:"js-loading",
      class:"loading",
      src:"img/loading-circle.gif",
      alt:"ローディング"
      },
    str:"ローディング中です"
});

シンプルバージョン

const createElement = (obj) => {
    const element = document.createElement(obj.tagName);
    if(obj.id){
        element.id = obj.id;
   }
    element.className = obj.className;
    element.textContent = obj.text;
    element.src = obj.src;
    element.alt = obj.alt;
    return element;
}

const loadingImg = createElement({
    tagName:"img",
    id:"js-loading",
    className:"loading",
    src:"img/loading-circle.gif",
    alt:"ローディング"
});

おわりに

この関数は、もなかさんに根気よくレビューしてもらい、完成しました。ありがとうございます!

この関数を使ったコードはこちらです。

https://github.com/nakagawamai/js-lesson/blob/main/lesson17/script.js
まい

フロントエンドエンジニア目指して、勉強中です。

JavaScriptカテゴリの最新記事