あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。

createElementメソッドが微妙なので汎用的な関数にする

JavaScriptでDOMを生成するとき、document.createElementというメソッドを使いますが、属性の設定とかstyleの設定をしようとすると、縦にひたすら代入文を書き続ける感じになってあんまり好きじゃありません。

各種JSライブラリを導入すれば解決できる話ですが、車輪の再発明でシンプルな関数を作って対応することにします。

createElement関数のサンプル

function createElement(elem, attrObj, styleObj) {
  var element = document.createElement(elem);
  if (attrObj) {
    for (var attr in attrObj) {
      element[attr] = attrObj[attr];
    }
  }
  if (styleObj) {
    for (var prop in styleObj) {
      /* Mochikit.Baseから拝借 */
      var arr = prop.split('-');
      var cc = arr[0];
      for (var i = 1; i < arr.length; i++) {
        cc += arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
      }
      element.style[cc] = styleObj[prop];
    }
  }
  element.text = function(str) {
    if (element.innerText !== undefined) {
      element.innerText = str;
    }
    else if (element.textContent !== undefined) {
      element.textContent = str;
    }
    return element;
  };
  element.html = function(htmlstr) {
    element.innerHTML = htmlstr;
    return element;
  };
  return element;
};

第二引数が不要な時は、nullなどを入れて対応する必要があります。ついでにメソッドチェーンで文字やHTMLを組み込めるようにしました。

組み込みのcreateElementメソッドを使ったサンプル

var p = document.createElement('p');
p.id = 'hoge';
p.title = 'fuga';
p.style.color = '#fff';
p.style.backgroundColor = '#000';
p.style.padding = '10px';
p.textContent = 'piyo';
document.body.appendChild(p);

さっきのcreateElement関数を使ったサンプル

document.body.appendChild(createElement('p', {
  'id' : 'hoge',
  'title' : 'fuga'
}, {
  'color' : '#fff',
  'background-color' : '#000',
  'padding' : '10px'
}).text('piyo'));

まとめ

プロパティ名を文字列化しないとエラーが出たりの制約はありますが、ひとまとめに処理してしまえるのは楽です。