web-dev-qa-db-fra.com

Créer un élément dans JQuery

Je voudrais créer un élément dans Jquery/Javascript en utilisant "div.someelement" comme ceci

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

Mais je ne veux pas copier un élément avec la même classe, je voudrais en créer un nouveau.

document.createElement crée "<div.somelement>" au lieu de <div class="someelement">

javascriptjquerycreateelement
11
Matt

Essaye ça:

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

Cela va créer un nouvel élément à l'intérieur de #container et l'enregistrer en tant que $someelement pour pouvoir le consulter ultérieurement.

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

UPDATE

Vous pouvez cloner l'original puis le vider. Cela n'affecte en rien l'élément d'origine.

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

J'utiliserais la méthode suivante pour créer des éléments à la volée

$("<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");
19
Jishnu A P

Vous pouvez le faire comme suit:

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

ou si vous n'avez pas besoin de l'élément, vous pouvez directement l'ajouter:

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

Utilisez ceci:

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

Ou vous pouvez enchaîner les appels:

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

MODIFIER:

J'ai peut-être mal compris la question, cela aidera peut-être. Pour créer un nouvel ensemble d’éléments, utilisez la méthode clone de jQuery:

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

J'utiliserais le code zen pour textarea comme point de départ. Sa syntaxe est assez proche de ce que vous essayez de faire, c’est une implémentation bien comprise. Vous devriez pouvoir invoquer la transformation à partir d'une chaîne brute plutôt que d'une zone de texte avec un petit ajustement.

1
James Holmes

Selon la question, vous souhaitez utiliser une syntaxe telle que "div.someelement" pour créer un élément.

Pour ce faire, vous devez créer votre propre analyseur.

C'est très simple si ce sera la syntaxe exacte.

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

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

Mais si vous voulez faire cela, vous pouvez aussi bien utiliser des méthodes natives.

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

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

Si vous souhaitez autoriser la syntaxe CSS complète pour la création d'un élément, vous pouvez consulter l'analyseur de regex utilisé par Sizzle et l'utiliser selon vos besoins.

1
gray state is coming

Créez simplement un nouvel élément pour jQuery:

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

si vous voulez attribuer des attributs pour utiliser simplement:

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

Rember by class utilise toujours comme ceci "class", car class est un nom réservé

0
Patrick Bentveld

Puisque vous demandez comment créer un élément à partir de la syntaxe css, vous devez utiliser un analyseur pour interpréter la syntaxe.

Voici un exemple à partir duquel vous pouvez construire. Cela correspond à un nom d'élément suivi d'un identifiant, d'une classe ou d'autres attributs. Il ne couvrira pas certains cas Edge, mais fonctionnera dans la plupart des cas.

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

Créez ensuite une fonction pour obtenir les pièces et créer un élément.

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

Puis passez une chaîne appropriée à la fonction, qui retournera l’élément.

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

var element = elementFromSelector(str);

Avant de créer l'élément, les pièces ressemblent à ceci.

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

Ensuite, il utilise ces informations pour créer l'élément renvoyé.

0
gray state is coming