Скажу сразу, всю 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
Автор: WAYS
