Создать элемент в Jquery

Я хотел бы создать элемент в jQuery / Javascript, используя " div.someelement" такой

var SomeElement = $("div.someelement");
$( "#container" ).append( SomeElement );

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

document.createElement создает "<div.somelement>" вместо <div class="someelement">

11
createelement javascript jquery

8 ответов

попробуйте это:

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

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

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

обновление

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

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

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

$("<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");
19

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

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

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

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

В соответствии с вопросом, который вы хотите использовать синтаксис, как "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 для создания элемента, то вы можете посмотреть на синтаксический анализатор regex, который использует Sizzle, и используйте его для ваших нужд.

1

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

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

или вы можете связать вместе вызовы:

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

EDIT:

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

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

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

1

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

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

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

затем сделайте функцию, чтобы получить детали и создать элемент.

function elementFromSelector(str) {
    var match, parts = {}, quote_re = /^("|').+()$/;
    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"
}

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

0

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

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

Если вы хотите, чтобы атрибуты элемента de simplie использовали:

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

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

0