15

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

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

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

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

4

8 回答 8

23

我将使用以下方法即时创建元素 

$("<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");
于 2012-08-27T13:44:34.063 回答
20

尝试这个：

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

这将在其中创建一个全新的元素#container并将其保存以$someelement供以后参考。

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

更新

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

var $someelement = $('div.someelement').clone().empty().appendTo('#container');
于 2012-08-27T13:39:38.593 回答
3

您可以通过以下方式做到这一点：

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

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

$('#container').append('<div class="someelement"></div>');
于 2012-08-27T13:40:34.780 回答
1

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

于 2012-08-27T13:47:45.547 回答
1

用这个：

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

或者您可以将调用链接在一起：

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

编辑：

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

$("div.someelement").clone().appendTo("#container");
于 2012-08-27T13:39:11.503 回答
1

我会使用textarea 的 zen 编码作为起点。它的语法对于您正在尝试做的事情足够接近，它是一个很好理解的实现。您应该能够从原始字符串而不是从文本区域调用转换，只需稍作调整。

于 2012-08-27T13:59:21.747 回答
0

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

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

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

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

于 2012-08-27T15:11:40.380 回答
0

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

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

如果您想在属性中简单地使用 de 元素：

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

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

于 2013-09-11T14:11:40.900 回答