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

в 14:40, , рубрики: dom, jquery, web-разработка, Веб-разработка, метки: , , ,

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

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js