Мы уже давно привыкли пользоваться функцией document.createElement() для создания элементов, которые необходимо добавить в DOM. С учетом добавления аттрибутов и переменных, код выглядит приблизительно следующим образом:

var elem = document.createElement("input");
elem.setAttribute("id","uname");
elem.className("my_class");
elem.setAttribute("type", "text");
elem.setAttribute("name", "username");
elem.setAttribute("value", "");
elem.setAttribute("size", "20");
elem.onkeypress = validate;
elem._my_var_ = 12345;

Я решил создать функцию, которая делала бы все эти процедуры в одной строке, и вот что у меня получилось:

/**
 * Функция для создания элементов HTMLElement
 * @param {String} tag - имя элемента, которые нужно создать (div, input и т.д.)
 * @param {Object} attr - объект, содержащий аттрибуты элемента
 * @param {Object} vars - объект, содержащий переменные элемента
 */
function ce(tag, attr, vars){
	if(tag){
		var elem = document.createElement(tag);

		if (attr){
			for (var name in attr){
				var value = attr[name];
				if ( typeof value != "undefined" ) {
					if(name == 'class' || name == 'for'){
						name = { "for": "htmlFor", "class": "className" }[name] || name;
						elem[name] = value;
					} else {
						elem.setAttribute(name, value);
					}
				}
			}
		}

		if (vars){
			for (var i in vars)
				elem[i] = vars[i];
		}

		return elem;
	}
	return null;
}

Единственным обязательным параметром в этой функции является аргумент tag, другие два аргумента представляют собой объекты, которые содержат значения имена и значения аттрибутов и переменных, которе нужно присвоить элементу.

В итоге, создание текстового элемента, пример которого приведен выше, примет следующий вид:

// создаём текстовое поле
var elem = ce("input",
		{id:"uname", type:"text", name:"username", value:"", size:"20"},
		{className:"my_class", onkeypress:function(){alert(this._my_var_);}, _my_var_ : 12345}
);

И еще несколько примеров:

// элемент div без аттрибутов и переменных
var myDiv = ce("div");

// элемент form только с аттрибутами
var myForm = ce("form", {name:"search", action:"search.php", method:"post"});

// элемент span только с переменными
var mySpan = ce("span", null, {className:"theQuote", onmouseover:hoverMe});

Запись добавлена 4 февраля 2008 в категории DOM.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.