我想像这样使用“div.someelement”在 Jquery/Javascript 中创建元素
var SomeElement = $("div.someelement");
$( "#container" ).append( SomeElement );
但我不想复制具有相同类的元素，我想创建一个新的。
document.createElement 正在创建 "<div.somelement>" 而不是 <div class="someelement">
【问题讨论】：
标签： javascript jquery createelement
只需为 jQuery 创建一个新元素：
var $newElement = $(document.createElement("div"));
$newElement.appendTo($("body"));
如果你想在属性中简单地使用：
$newElement.attr({
id : "someId",
"class" : "someClass"
});
按类记住总是这样使用“类”，因为类是保留名称
【讨论】：
由于您询问的是从 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"
}
然后它使用该信息来创建返回的元素。
【讨论】：
我会使用zen coding for textarea 作为起点。它的语法对于您正在尝试做的事情足够接近，它是一个很好理解的实现。您应该能够从原始字符串而不是从文本区域调用转换。
【讨论】：
试试这个：
var $someelement = $('<div class="someelement"/>').appendTo('#container');
这将在#container 内部创建一个全新的元素并将其保存为$someelement 以方便以后参考。
http://api.jquery.com/jQuery/#jQuery2
更新
您可以克隆原始文件，然后将其清空。这根本不会影响原始元素。
var $someelement = $('div.someelement').clone().empty().appendTo('#container');
【讨论】：
使用这个：
var someElement = $("<div></div>");
someElement.addClass("someelement");
$("#container").append(someElement);
或者您可以将调用链接在一起：
$("#container").append(
$("<div></div>")
.addClass("someelement")
);
编辑：
也许我误解了这个问题，也许这会有所帮助。要创建一组新元素，请使用 jQuery 的 clone 方法：
$("div.someelement").clone().appendTo("#container");
【讨论】：
根据您想使用"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 使用的正则表达式解析器，并根据您的需要使用它。
【讨论】：
我会使用以下方法即时创建元素
$("<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");
【讨论】：
您可以通过以下方式做到这一点：
var newElement = $('<div class="someelement"></div>');
$('#container').append(newElement);
或者如果您不需要该元素，您可以直接附加它：
$('#container').append('<div class="someelement"></div>');
【讨论】：