Иногда бывает нужно создавать элементы страницы (div’ы, элементы формы, таблицы и т.д.) в ходе выполнения скрипта, в ответ на какие-то пользовательские действие… ну в общем причин можно найти много. Как это делать описано в этой заметке.

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

Вот так можно формировать формы:

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

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

// 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);

// 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);
});

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

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

Фставляем iframe:

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

Формируем таблицу:

//Данные
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);

Формируем списки:

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);

Вот так можно подключать скрипты и стили:

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

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

Добавлено: 22 Сентября 2013 09:09:26 Добавил: Андрей Ковальчук Нравится 0

Добавить