Создание элемента в JQuery

Ответ 1

Попробуйте следующее:

var $someelement = $('<div class="someelement"/>').appendTo('#container');

Это создаст новый элемент внутри #container и сохранит его как $someelement для более легкой ссылки позже.

http://api.jquery.com/jQuery/#jQuery2

UPDATE

Вы можете клонировать оригинал, а затем выпустить его. Это не влияет на исходный элемент вообще.

var $someelement = $('div.someelement').clone().empty().appendTo('#container');

Ответ 2

Я бы использовал следующий метод для создания элементов на лету

$("<div/>",{
    "class" : "someelement",
    // .. you can go on and add properties
    "css" : {
        "color" : "red"
    },
    "click" : function(){
        alert("you just clicked me!!");
    },
    "data" : {
       "foo" : "bar"
    }
}).appendTo("#container");

Ответ 3

Вы можете сделать это следующим образом:

var newElement = $('<div class="someelement"></div>');
$('#container').append(newElement);

или если вам не нужен элемент, который вы можете напрямую добавить:

$('#container').append('<div class="someelement"></div>');

Ответ 4

Используйте это:

var someElement = $("<div></div>");
someElement.addClass("someelement");
$("#container").append(someElement);

Или вы можете объединить вызовы:

$("#container").append(
    $("<div></div>")
    .addClass("someelement")
);

EDIT:

Возможно, я неправильно понял вопрос, может быть, это поможет. Чтобы создать новый набор элементов, используйте метод jQuery clone:

$("div.someelement").clone().appendTo("#container");

Ответ 5

В соответствии с вопросом вы хотите использовать синтаксис типа "div.someelement" для создания элемента.

Чтобы сделать это, вам нужно сделать свой собственный парсер.

Это очень просто, если это будет точный синтаксис.

var str = "div.someelement",
    parts = str.split("."),
    elem = $("<" + parts.shift() + ">"),
    cls;

while (cls = parts.shift())
    elem.addClass(cls);

Но если вы собираетесь это сделать, вы можете также использовать собственные методы.

var str = "div.someelement",
    parts = str.split("."),
    elem = document.createElement(parts.shift());

elem.className = parts.join(" ");

Если вы хотите разрешить полный синтаксис CSS для создания элемента, вам может понадобиться посмотреть на парсер регулярных выражений, который использует Sizzle, и использовать его для ваших нужд.

Ответ 6

Я бы использовал zen-кодирование для textarea в качестве отправной точки. Его синтаксис достаточно близок к тому, что вы пытаетесь сделать, его хорошо понятная реализация. Вы должны иметь возможность вызывать преобразование из исходной строки, а не из текстового поля с небольшой настройкой.

Ответ 7

Поскольку вы спрашиваете о создании элемента из синтаксиса css, вам нужно использовать синтаксический анализатор для синтаксиса.

Вот пример, из которого вы можете построить. Это будет соответствовать имени элемента, за которым следует идентификатор, класс или другие атрибуты. Он не будет охватывать некоторые краевые случаи, но будет работать в большинстве случаев.

var elem_regex = /^(\w+)?|(#|\.)([^.#\[]+)|(\[[^\]]+?\])/g

Затем создайте функцию для получения деталей и создания элемента.

function elementFromSelector(str) {
    var match, parts = {}, quote_re = /^("|').+(\1)$/;
    while (match = elem_regex.exec(str)) {
        if (match[1]) 
            parts.name = match[1];
        else if (match[2] === ".") {
            if (!parts.clss) 
                parts.clss = [];
            parts.clss.push(match[3]);
        } else if (match[2] === "#")
            parts.id = match[3];
        else if (match[4]) {
            var attr_parts = match[4].slice(1,-1).split("="),
                val = attr_parts.slice(1).join("");
            parts[attr_parts[0]] = quote_re.test(val) ? val.slice(1,-1) : val;
        }
        else throw "Unknown match";
    }
    if (parts.name) {
        var elem = document.createElement(parts.name);
        delete parts.name;
        for (var p in parts)
            if (p === "clss")
                elem.className = parts[p].join(" ");
            else
                elem[p] = parts[p];
        return elem;
    } else throw "No element name at beginning of string";
}

Затем передайте правильную строку функции, и она вернет элемент.

var str = 'input#the_id.firstClass.secondClass[type="text"][value="aValue"]';

var element = elementFromSelector(str);

Перед созданием элемента части выглядят следующим образом.

{
    "name": "input",
    "id": "the_id",
    "clss": [
        "firstClass",
        "secondClass"
    ],
    "type": "text",
    "value": "aValue"
}

Затем он использует эту информацию для создания возвращаемого элемента.

Ответ 8

Просто создайте новый элемент для jQuery:

var $newElement = $(document.createElement("div"));
$newElement.appendTo($("body"));

если вы хотите использовать атрибуты для элемента simpleie:

$newElement.attr({
    id : "someId",
    "class" : "someClass"
});

Rember по классу всегда используют этот "класс", потому что класс является зарезервированным именем