Creare Elemento in jQuery

Question

vorrei creare elemento in jQuery/Javascript utilizzando "div.someelement" come questo

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

Ma io non voglio copiare elemento con la stessa classe, mi piacerebbe per crearne uno nuovo.

document.createElement sta creando "<div.somelement>" invece di <div class="someelement">

Answer 1

Prova questa:

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

questo creerà un nuovo elemento di marca all'interno di #container e salvarlo come $someelement per un facile riferimento futuro.

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

UPDATE

Si potrebbe clonare l'originale poi svuotarlo. Questo non ha alcun effetto sull'elemento originale.

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

Answer 2

Utilizzare questa:

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

Oppure è possibile concatenare insieme i chiamate:

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

EDIT:

Forse ho capito male il domanda, ma questo sarà d'aiuto Per creare un nuovo insieme di elementi, utilizzare clone il metodo di jQuery:

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

Answer 3

È possibile farlo dal seguente:

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

o se non è necessario l'elemento è possibile aggiungerlo direttamente:

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

Answer 4

Vorrei utilizzare il seguente metodo per creare elementi al volo

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

In base alla domanda, si desidera utilizzare una sintassi come "div.someelement" per creare un elemento.

Per fare ciò, è necessario creare il proprio parser.

È molto semplice se questa sarà la sintassi esatta.

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

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

Ma se hai intenzione di fare questo, potresti anche usare metodi nativi.

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

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

Se si desidera consentire per la sintassi CSS insufficiente e per la creazione di un elemento, quindi si consiglia di guardare il parser regex che Sizzle utilizza, e usarlo per le vostre esigenze.

Answer 6

Vorrei utilizzare zen coding for textarea come punto di partenza. La sua sintassi è abbastanza vicina per quello che stai cercando di fare, è un'implementazione ben compresa. Dovresti essere in grado di invocare la trasformazione da una stringa raw piuttosto che da una textarea con un piccolo ritocco.

Answer 7

Poiché si sta chiedendo di creare un elemento dalla sintassi css, è necessario utilizzare un parser per interpretare la sintassi.

Ecco un esempio da cui è possibile creare. Questo corrisponderà al nome di un elemento seguito da id, classe o altri attributi. Non coprirà alcuni casi limite, ma funzionerà nella maggior parte dei casi.

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

Quindi creare una funzione per ottenere le parti e creare 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"; 
} 

Quindi passare una stringa corretta alla funzione e restituirà l'elemento.

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

var element = elementFromSelector(str); 

Prima di creare l'elemento, le parti appaiono così.

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

Quindi utilizza tali informazioni per creare l'elemento che viene restituito.

Answer 8

È sufficiente creare un nuovo elemento per jQuery:

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

se si vuole a attributi di de uso elemento Simplie:

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

Rember per classe utilizzare sempre così "classe", perché la classe è un nome riservato