Question

我想通过像这样使用“div.someelement”在Jquery / Javascript中创建元素

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

但是我不想复制同一个类的元素，我想创建一个新元素。

document.createElement正在创建"<div.somelement>"而不是<div class="someelement">

Answer 1

我会使用以下方法动态创建元素

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

Answer 2

试试这个：

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

这将在#container内创建一个全新的元素，并将其另存为$someelement以便日后查看。

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

<强>更新

您可以克隆原件然后将其清空。这根本不会影响原始元素。

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

Answer 3

您可以通过以下方式执行此操作：

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

或者如果您不需要该元素，您可以直接附加它：

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

Answer 4

使用此：

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

或者你可以把电话连在一起：

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

编辑：

也许我误解了这个问题，也许这会有所帮助。要创建一组新元素，请使用jQuery的clone方法：

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

Answer 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使用的正则表达式解析器，并根据您的需要使用它。

Answer 6

我会以zen coding for textarea为出发点。它的语法足够接近你想要做的事情，它是一个很好理解的实现。您应该能够从原始字符串调用转换，而不是通过稍微调整来调整textarea。

Answer 7

由于您要求从css语法创建元素，因此需要使用解析器来解释语法。

以下是您可以构建的示例。这将匹配元素名称，后跟id，class或其他属性。它不会涵盖一些边缘情况，但在大多数情况下都可以使用。

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"
}

然后它使用该信息创建返回的元素。

Answer 8

只需为jQuery创建一个新元素：

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

如果你想在属性上使用de element简化使用：

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

Rember by class总是像这个“class”一样使用，因为class是保留名称

在Jquery中创建元素

8 个答案: