14 апреля 2006 года, в 14:03

JavaScript: создание DOM фрагментов

Если приходилось когда-нибудь писать JavaScript и приходилось в JavaScript’е писать что-то вроде:

var p = document.createElement( "p" );
p.appendChild( document.createTextNode( "Настоящий рыба фиш." ) );
var div = document.createElement( "div" );
div.setAttribute( 'id', 'new' );
div.appendChild( p );

то это может быть вам полезно.

Проблема: когда создаёшь более, чем один элемент, вложенные друг в друга, код становится очень сложным.

Предлагаю простой инструмент решения задачи — функцию create() (исходник ниже).  Например, создаём параграф текста:

var el = create( "p", { },  "Farewell, Love!" );

Или div с параграфом и ссылкой внутри него:

var div = create( "div", { id: "new", style: "background:#fff" }, 
   create( "p", { align: 'center' },
     "вступление : ", 
     create( 'a', { href: "http://ua.fishki.net/picso/kotdavinchi.jpg" }, 
                "картинка" ),
     " : конец" )
);

Или вот, делаем таблицу:

var holder = document.getElementById( "holder2" );
var table;
var td;
holder.appendChild( 
 table = 
   create( "table", {id: 'ugly', cols:3}, 
     create( "tbody", {},
       create( "tr", {}, 
         create( "td", { width: '10%' }, 
                       "hello" ),
         td = 
         create( "td", { style: 'background: #fcc' }, 
                       "there" ),
         create( "td", { Class: 'special2' }, "everywhere" )
       ) 
     ) 
  )
);

Обратите внимание:

1. IE требует tbody элемент, иначе отказывается показывать таблицу.
2. Аттрибут class с чем-то конфликтует, поэтому приходится писать его как Class.  Кажется, на результат это влияния не оказывает.
3. table = и tr = в примере позволяют сохранить созданные вложенные объекты для дальнейшей работы с ними.
4. Этот код работает и в IE, и в Mozilla, и в Opera.

Сама функция

// Ivan Kurmanov, http://ahinea.com/
// 
// No warrany of any kind.  The code is free, use any opensource license you like.
// 2006-04-14 13:53
function create( name, attributes ) {
  var el = document.createElement( name );
  if ( typeof attributes == 'object' ) {
    for ( var i in attributes ) {
      el.setAttribute( i, attributes[i] );

      if ( i.toLowerCase() == 'class' ) {
        el.className = attributes[i];  // for IE compatibility

      } else if ( i.toLowerCase() == 'style' ) {
        el.style.cssText = attributes[i]; // for IE compatibility
      }
    }
  }
  for ( var i = 2; i<arguments.length; i++ ) {
    var val = arguments[i];
    if ( typeof val == 'string' ) { val = document.createTextNode( val ) };
    el.appendChild( val );
  }
  return el;
}

Оп. :-)

Темы: javascript, программирование, веб-строительство