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:"ローディング"
});おわりに
この関数は、もなかさんに根気よくレビューしてもらい、完成しました。ありがとうございます！
この関数を使ったコードはこちらです。
