15

このような「div.someelement」を使用して、Jquery/Javascriptで要素を作成したいと思います

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

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

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

4

8 に答える 8

23

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

$("<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");
于 2012-08-27T13:44:34.063 に答える
20

これを試して：

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

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

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

アップデート

オリジナルのクローンを作成してから空にすることができます。これは元の要素にはまったく影響しません。

var $someelement = $('div.someelement').clone().empty().appendTo('#container');
于 2012-08-27T13:39:38.593 に答える
3

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

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

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

$('#container').append('<div class="someelement"></div>');
于 2012-08-27T13:40:34.780 に答える
1

"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が使用する正規表現パーサーを確認し、必要に応じて使用することをお勧めします。

于 2012-08-27T13:47:45.547 に答える
1

これを使って：

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

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

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

編集：

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

$("div.someelement").clone().appendTo("#container");
于 2012-08-27T13:39:11.503 に答える
1

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

于 2012-08-27T13:59:21.747 に答える
0

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

これがあなたが構築できる例です。これは、要素名の後にid、class、またはその他の属性が続くものと一致します。一部のエッジケースについては説明しませんが、ほとんどの場合は機能します。

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

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

于 2012-08-27T15:11:40.380 に答える
0

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

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

要素を単純化するための属性を使用する場合は、次のようにします。

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

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

于 2013-09-11T14:11:40.900 に答える