Crear elemento en Jquery

Question

Me gustaría crear elemento en Jquery/Javascript mediante el uso de "div.someelement" como esto

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

Pero no quiero copiar elemento con la misma clase, me gustaría para crear uno nuevo.

document.createElement está creando "<div.somelement>" en lugar de <div class="someelement">

Answer 1

Prueba esto:

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

Esto creará un nuevo elemento de la marca dentro de #container y guardarlo como $someelement para facilitar su consulta posterior.

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

ACTUALIZACIÓN

Se puede clonar el original, entonces se vacía a cabo. Esto no afecta el elemento original en absoluto.

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

Answer 2

Utilice esta:

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

O puede encadenar las llamadas:

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

EDIT:

Tal vez no he entendido bien la pregunta, ma y esto ayudará Para crear un nuevo conjunto de elementos, utilice clone método de jQuery:

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

Answer 3

Usted puede hacer esto por lo siguiente:

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

o si no es necesario el elemento puede añadir directamente:

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

Answer 4

me gustaría utilizar el siguiente método para crear elementos sobre la marcha

$("<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 5

De acuerdo con la pregunta, desea utilizar una sintaxis como "div.someelement" para crear un elemento.

Para hacer eso, necesita hacer su propio analizador.

Es muy simple si esa será la sintaxis exacta.

var str = "div.someelement", 
    parts = str.split("."), 
    elem = $("<" + parts.shift() + ">"), 
    cls; 

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

Pero si vas a hacer esto, también puedes usar métodos nativos.

var str = "div.someelement", 
    parts = str.split("."), 
    elem = document.createElement(parts.shift()); 

elem.className = parts.join(" "); 

Si desea permitir la sintaxis CSS completo para la creación de un elemento, entonces es posible que desee ver en el analizador de expresiones regulares que utiliza chisporroteo, y utilizarlo para sus necesidades.

Answer 6

Yo usaría zen coding for textarea como punto de partida. Su sintaxis es lo suficientemente cercana para lo que estás tratando de hacer, es una implementación bien entendida. Debería poder invocar la transformación desde una cadena en bruto en lugar de desde un área de texto con un pequeño ajuste.

Answer 7

Dado que usted está preguntando sobre la creación de un elemento a partir de la sintaxis de css, necesita usar un analizador para interpretar la sintaxis.

Aquí hay un ejemplo desde el que puede compilar. Esto coincidirá con un nombre de elemento seguido por id, clase u otros atributos. No cubrirá algunos casos extremos, pero funcionará en la mayoría de los casos.

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

A continuación, realice una función para obtener las piezas y crear un elemento.

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

A continuación, pase una cadena adecuada a la función y devolverá el elemento.

var str = 'input#the_id.firstClass.secondClass[type="text"][value="aValue"]'; 

var element = elementFromSelector(str); 

Antes de crear el elemento, las piezas se ven así.

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

Luego usa esa información para crear el elemento que se devuelve.

Answer 8

Basta con crear un nuevo elemento para jQuery:

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

si quieres a los atributos de de uso elemento Simplie:

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

Rember por clase usar siempre así "clase", porque class es un nombre reservado