Javascript 在Jquery中创建元素

我想使用如下“div.someelement”在Jquery/Javascript中创建元素

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

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

document.createElement

正在创建

”

，而不是

使用以下方法：

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

试试这个：

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

---

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

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

var newElement=$（''）；
$（“#容器”）.append（新元素）；

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

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

$（'#容器'）。附加（''）；

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

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

$（“”{
“类”：“someelement”，
//…您可以继续添加属性
“css”：{
“颜色”：“红色”
},
“单击”：函数（）{
警惕（“你刚才点击了我！！”；
},
“数据”：{
“foo”：“bar”
}
}).附于（“容器”）；

根据问题，您需要使用类似于

“div.someelement”

的语法来创建元素

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 = "div.someelement",
    parts = str.split("."),
    elem = $("<" + parts.shift() + ">"),
    cls;

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

---

如果您希望为创建元素提供完整的CSS语法，那么您可能希望查看Sizzle使用的正则表达式解析器，并根据您的需要使用它。

我将使用它作为起点。它的语法对于您要做的事情来说已经足够接近了，这是一个很好理解的实现。您应该能够从原始字符串而不是从文本区域调用转换，只需稍加调整。

因为您要求从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"
}

---

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

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

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

如果要在属性处取消元素简化，请使用：

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

---

记住，按类总是使用类似于“类”的名称，因为类是一个保留名称

谢谢你的回答，但我必须使用“div.someelement”创建此元素，如果“div.someelement”不存在怎么办？@Matt:为什么你接受了一个与你在问题中所问不符的答案？谢谢你的回答，但这不是我需要的。我知道有这种可能性，但我并不满意。我在Jquery插件中有类似someContainer的选项：“div.someelement”，我必须使用someContainer选项创建此元素。如果不知道属性，您还可以添加文本、事件处理程序，甚至数据，很好！如果要设置多个属性，这就是方法。比传递长字符串更干净。您好，您的选择更好。但是没有其他方法可以做到这一点吗？选项中的原因可能是“div[href=somehref”，而不是“div.someelement”@Matt:如果你想要任何有效的CSS语法，那么你需要一个CSS字符串解析器。SizzleJS项目有一个内置的解析器，你可以借用。你需要根据自己的需要修改代码。@Matt:我添加了另一个答案，使元素从你展示的更复杂的字符串中生成。请查看该答案。

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

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

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