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

Скажу сразу, всю 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

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

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

Весь код на github