Website development
jQuery
17 January 2013

Что нам стоит DOM построить

From Sandbox
Скажу сразу, всю DOM-модель мы строить не будем, а лишь рассмотрим ее элементы и как с ними работать при помощи jQuery. Статья рассчитана на начинающих или тех кто хочет вспомнить как можно строить элементы «на лету», надеюсь кому-то это будет полезно.
Большинство веб-разработчиков сталкивается с необходимостью вставить какое-либо содержимое из js, возможно это ajax или событие. Но никто не задумывается о том что с вашим кодом возможно кому-то придется работать. И часто даже в очень известных плагинах можно встретить код такого типа:

var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#table').append(content);


Сразу видно, что этот кусочек кода сделан на быструю руку, я и сам так когда-то делал, но ведь можно сделать и лучше.
В статье я вывел самые основные элементы которые используются при разработке, возможно они помогут вам сэкономить время.
Под катом много кода с примерами.

Вот еще интересный вариант:

function createTable() {
            $("#dynamicTable").append("<table>");
            $("#dynamicTable").append("<caption>My table</caption>");
            $("#dynamicTable").append("<thead>");
            $("#dynamicTable").append("<tr>");
            $("#dynamicTable").append("<th>A</th>");
            $("#dynamicTable").append("<th>B</th>");
            $("#dynamicTable").append("<th>C</th>");
            $("#dynamicTable").append("</tr>");
            $("#dynamicTable").append("</thead>");
            
            $("#dynamicTable").append("<tbody>");
....
}

(так делать точно не нужно)

Сложно сказать хороший это код или нет, но он явно недружелюбный. Все элементы можно создавать с чистого Javascript, что и делает сам jQuery. Поэтому спорить о быстродействии нет смысла, я не замерял разницу, но очевидно, что она незначительная, перейдем к коду.

Div


var mydiv = $('<div/>', {
    id:     'mydiv',
    class:  'mydiv',
    text: 	'Содержимое блока' 
});
$('.content').append(mydiv);

Пример вывода:
<div class="mydiv" id="mydiv">Содержимое блока</div>
Демо

Form


var myform = $("<form/>", {
  	action: "/", 
}).appendTo('.content');

Пример вывода:
<form action="/"></form>
Демо

Input


$('<input/>', {
    id:     'myinput-1',
    class:  'myinput',
    type: 	'text',
    name: 	'myinput-1',
    val: 	'Habr',
    css: {
            'border': '1px solid red'
    } 
}).appendTo(myform);

Можно и так:
$('<input/>').attr({
    id:     'myinput-2',
    class:  'myinput',
    type: 	'text',
    name: 	'myinput-2',
    placeholder: 	'Поиск...'
}).appendTo(myform);


$('<input/>', {
    type: 	'submit',
    name: 	'send',
    val: 	'Отправить' 
}).appendTo(myform);

Пример вывода:
<form action="/">
	<input style="border: 1px solid red;" name="myinput-1" class="myinput" id="myinput-1" type="text">
	<input placeholder="Поиск..." name="myinput-2" class="myinput" id="myinput-2" type="text">
	<input value="Отправить" name="send" type="submit">
</form>
Демо

Select


var myselect = $('<select/>', { id: 'myselect'});
var items = ["Google","Yandex","Bing"];
//Наполняем список
$.each(items,function() {
	$('<option/>', {
		val:  this,
		text: this
	}).appendTo(myselect);
});
myselect.val('Yandex');
$('.content').append(myselect);

Пример вывода:
<select id="myselect">
	<option value="Google">Google</option>
	<option value="Yandex">Yandex</option>
	<option value="Bing">Bing</option>
</select>
Демо

Как видим все работает хорошо, но где же наш любимый selected?
Заменим:
myselect.val('Yandex');
на:
$('option[value="Yandex"]', myselect).attr('selected', 'selected');
И все заработает как мы привыкли, хотя иногда первого варианта достаточно

<select id="myselect">
	<option value="Google">Google</option>
	<option selected="selected" value="Yandex">Yandex</option>
	<option value="Bing">Bing</option>
</select>


Radio


var myradiodiv = $('<div/>', {
    id:     'myradiodiv'
}).appendTo(".content");
var items = ["Google","Yandex","Bing"];
$.each(items, function(i,item) {
	$('<label/>').append(
		$('<input/>', {
			type: 'radio',
			name: 'myradio',
			val: 	item
		})
	).append(item).appendTo(myradiodiv);
});

Пример вывода:
<div id="myradiodiv">
	<label>Google
		<input value="Google" name="myradio" type="radio">
	</label>
	<label>Yandex
		<input value="Yandex" name="myradio" type="radio">
	</label>
	<label>Bing
		<input value="Bing" name="myradio" type="radio">
	</label>
</div>
Демо

Button


var mybutton = $('<button/>',
{
    text: 'Click Me',
    click: function () { alert('Hello Habr'); }
}).appendTo('.content');

Пример вывода:
<button>Click Me</button>


Iframe


$('<iframe/>', {
    name: 'myframe',
    id:   'myframe',
    src:  'about:blank'
}).appendTo('.content');

Пример вывода:
<iframe src="about:blank" id="myframe" name="myframe"></iframe>


Table


 заполняется аналогично  поэтому я его пропустил

//Данные var TableTitle = ["Site", "Google","Yandex","Bing"]; var TableValue = [ ["http://habr.ru/","4","6","26"], ["http://habrahabr.ru/","3","1","6"], ["http://google.ru/","1","1","1"] ]; //Создадим структуру var mytable = $('<table/>',{ class:'mytable' }).append( $('<thead/>'), $('<tfoot/>'), $('<tbody/>') ); //Наполняем табличку //Заголовок var TitleCell = $('<tr/>'); $.each(TableTitle,function( myIndex, myData ) { TitleCell.append( $('<th/>',{ text:myData }) ); }); $("thead",mytable).append(TitleCell); //Данные $.each(TableValue,function() { //Переопределяем строку var DataCell = $('<tr/>'); //Пробегаемся по ячейкам $.each(this,function() { DataCell.append( $('<td/>',{ text:this }) ); }); $("tbody",mytable).append(DataCell); }); //Без цикла (не обязательно) $.each(TableValue,function( i, myData ) { $("tbody",mytable).append( $('<tr/>').append( $('<td/>',{text:this[0]}), $('<td/>',{text:this[1]}), $('<td/>',{text:myData[2]}), //Или так $('<td/>',{text:myData[3]}) ) ); }); $('.content').append(mytable);

Пример вывода:
<table class="mytable">
	<thead>
		<tr>
			<th>Site</th>
			<th>Google</th>
			<th>Yandex</th>
			<th>Bing</th>
		</tr>
	</thead>
	<tfoot></tfoot>
	<tbody>
		<tr>
			<td>http://habr.ru/</td>
			<td>4</td><td>6</td>
			<td>26</td>
		</tr>
		<tr>
			<td>http://habrahabr.ru/</td>
			<td>3</td>
			<td>1</td>
			<td>6</td>
		</tr>
		<tr>
			<td>http://google.ru/</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
	</tbody>
</table>
Демо

Списки


var lang = ['Russian', 'English', 'Ukraine'];
var mylist = $('<ul/>');
//Наполняем
$.each(lang, function() {
    $('<li/>',{text:this}).appendTo(mylist);
    //Добавим ссылку
    $('<li/>').wrapInner(
    	$("<a/>",{
    		"href":"#",
    		text:this
    	}))
    .appendTo(mylist);
});
$('.content').append(mylist);

<ul>
	<li>Russian</li>
	<li><a href="#">Russian</a></li>
	<li>English</li>
	<li><a href="#">English</a></li>
	<li>Ukraine</li>
	<li><a href="#">Ukraine</a></li>
</ul>
Демо

Скрипты


$("<script/>",{
	src:'js/inc.js'
}).appendTo("body");


Стили


$("<link/>",{
	href:'css/inc.css',
	rel:'stylesheet'
}).insertAfter("link:last");


Конструкцию $('<input/>') можно писать и без ключа $(''), тоже будет работать.
Если у кого-то есть замечания/предложения, буду рад выслушать в ПМ или комментариях.

Весь код на github

UPD: Если у вас много данных, могут быть проблемы с производительностью. Напомню, js код выполняется на стороне клиента и результат зависит от конфигурации его компьютера.
Генерация таблички размером 4 колонки на 100 строк у меня занимает 36мс.
Я не хочу спорить про производительность, о чем намекнул в начале статьи, если у Вас есть решения, как можно, используя jQuery, сделать это более лучше, пишите код.

+22
53.7k 539
Comments 59
Top of the day