JavaScript でHTML要素を生成する関数　寝太郎の江戸風呂。ね！

2024
11
23

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 (Sat.)

2010
11
08

JavaScript でHTML要素を生成する関数

JavaScript でHTML要素を生成するには、document.createElement を使用します。そして、そのHTML要素にさまざまな属性を追加していきます。HTML要素の生成と属性の追加が一度にできたら便利でしょう。そう考えて、作成したのが、neta.elements.element です。

書式

HTML要素=neta.elements.element(tagaName,propaties)

引数

neta.elements.element は２つの引数を取ります。第一引数は、生成するHTML要素の tagName です。第二引数は、生成されたHTML要素の属性を指定するオブジェクトです。

引数が１つで、それがオブジェクトである場合には、生成する要素はDIV要素で、そのDIV要素に対して指定した属性を適用します。引数が１つで、それが tagName である場合には、その生成する要素は tagName が示す要素です。

引数がない場合には、属性指定のないDIV要素を生成します。

属性指定オブジェクト

{innerHTML:'内容です。', onclick:func} のように記述します。各属性の間はカンマ(,)で区切ります。

スタイルの指定

{innerHTML:'内容です。', style:{backgroundColor:'#cc0000'}} のように記述します。style プロパティの値はオブジェクトで、そのオブジェクトにスタイルのプロパティを記述します。プロパティ名にはハイフン(-）を使用できませんので、ハイフン(-）を省略して続く文字を大文字にします。

属性の追加変更(attr)

HTML要素の属性は、必ずしも最初に指定する必要はありません。後で attr メソッドを実行することにより、追加変更が可能です。

子要素の追加(append)

子要素は append メソッドで追加できます。子要素が１つであれば、標準の appendChild と同じです。子要素の配列を引数に取れば、その子要素を順番に追加します。

文書への追加は?

生成したHTML要素を文書に追加するための特別なメソッドは用意していません。標準の appendChild や insertBefore を使用して下さい。

記述例

neta.addListener(function(){
 var container=document.getElementById('container');
 var div=neta.elements.element({
  innerHTML:'この部分は neta.elements.element で生成しました。',
  style:{color:'#33C'}
 });
 var span=neta.elements.element('span',{
  innerHTML:'この部分は append メソッド追加しました。',
  onclick:function(){alert('Hello!')},
  style:{color:'#C33'}
 });
 var btn=neta.elements.element('button',{
  innerHTML:'Click!',
  onclick:function(){alert('Hello!')}
 });
 div.append([span,btn]);
 container.appendChild(div);
 btn.attr({style:{color:'#c00'}});
});

実行例

ソースコード

if(!window['neta'])window['neta']={};
if(!window['neta']['elements'])window['neta']['elements']={};

(function(){
 var a=neta.elements;
 a.element=function(tagName,propaties){
  propaties=propaties||{};
  if(typeof tagName=='object'){
   propaties=tagName;
   tagName='div';
  }
  tagName=tagName||'div';
  propaties=propaties||{};
  var elm=document.createElement(tagName);
  var attr=function(propaties){
   for(var k in propaties){
    if(k=='style'){
     for(var m in propaties[k]){
      elm[k][m]=propaties[k][m];
     }
    }else{
      elm[k]=propaties[k];
    }
   }
  }
  attr(propaties);
  elm.attr=attr;
  elm.append=function(elms){
   if(elms.length){
    for(var i=0;i<elms.length;i++){
     elm.appendChild(elms[i]);
    }
   }else{
    elm.appendChild(elms);
   }
  } 
  return elm;
 }
})();