web-dev-qa-db-ja.com

jqueryで要素を作成する

このように「div.someelement」を使用してJquery/Javascriptで要素を作成したい

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

しかし、同じクラスの要素をコピーしたくないので、新しい要素を作成したいと思います。

document.createElementが作成しています"<div.somelement>" の代わりに <div class="someelement">

javascriptjquerycreateelement
14
Matt

これを試して：

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

これにより、#container内に新しい要素が作成され、後で簡単に参照できるように$someelementとして保存されます。

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

[〜＃〜]更新[〜＃〜]

オリジナルを複製して空にすることができます。これは、元の要素にはまったく影響しません。

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

次の方法を使用して、その場で要素を作成します

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

これは、次の方法で実行できます。

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

または、要素が必要ない場合は、直接追加できます。

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

これを使って：

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

または、呼び出しを連鎖させることができます。

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

編集：

多分私は質問を誤解しました、多分これは助けるでしょう。要素の新しいセットを作成するには、jQueryのcloneメソッドを使用します。

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

私は textareaのzenコーディング を出発点として使用します。その構文は、あなたがやろうとしていることに対して十分に近く、よく理解された実装です。少し調整するだけで、textareaからではなくraw文字列から変換を呼び出すことができるはずです。

1
J. Holmes

質問によると、"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が使用する正規表現パーサーを調べて、必要に応じて使用することができます。

1
gray state is coming

JQueryの新しい要素を作成するだけです。

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

属性を単純な要素にしたい場合：

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

クラスは予約名であるため、クラスごとのメンバーは常にこの「クラス」のように使用します

0
Patrick Bentveld

CSS構文から要素を作成することについて質問しているので、構文を解釈するにはパーサーを使用する必要があります。

これがあなたが構築できる例です。これは、要素名の後にID、クラス、またはその他の属性が続くものと一致します。一部のEdgeケースは対象外ですが、ほとんどの場合は機能します。

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

次に、その情報を使用して、返される要素を作成します。

0
gray state is coming