忍者ブログ

2018
10
17

[PR]

×

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

2018/10/17 (Wed.)

2010
11
08

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

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

書式

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

引数

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

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

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

属性指定オブジェクト

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

スタイルの指定

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

属性の追加変更(attr)

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

子要素の追加(append)

子要素は append メソッドで追加できます。子要素が1つであれば、標準の 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;
 }
})();

収録先

neta.elements.js
PR

2010/11/08 (Mon.) Trackback(0) Comment(0) JavaScript

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

09 2018/10 11
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア