5

jQueryセレクターを介してDOMから要素を選択する代わりに、要素を作成できるかどうか疑問に思っていました。

例えば：

$.create('#hello').insertAfter('#test');

次を生成します：

<div id="test">This element already existed in the DOM.</div>
<div id="hello"></div>

または、さらに良いことに、より複雑な操作の場合：

$.create('#test.a.b');

にとって：

<div id="test" class="a b"></div>

明らかに、：selected、：nth-​​child、：not（）などのより複雑な操作は、これらすべてを実装する必要はありません。

誰かが解決策を知っていますか？

ありがとう。

4

4 に答える 4

6

作成するには<div id="hello"></div>

試す

$('<div id="hello"></div>').appendTo('body');

<div id="test" class="a b"></div>と同じものを作成するには

$('<div id="test" class="a b"></div>').appendTo('body');

$('<div id="test" class="a b"></div>')新しい要素を作成しますが、DOMには追加しません。

その要素を追加するには、append（）、appendTo（）、insetAfter（）、insertBefore （）などを使用する必要があります。

次の目的で関数を使用することをお勧めします。

function createElement(el, target) {
   $(el).appendTo(target);
}

次のような関数を使用します。

createElement('<div id="test" class="a b"></div>', 'body');

の代わりに、新しく作成した要素を他のターゲットに追加することもできますbody。

次の関数が役立つと思います。

function createElement(el, prop, target) {
  var props = prop.split('.'),
      newelement = $(el),
      id = '',
      className = '';
    $.each(props, function(i, val) {
        if(val.indexOf('#') >= 0) {
           id += val.replace(/^#/, '');
        } else {
           className += val + ' ';
        }
    });
    if(id.length) newelement.attr('id', id);
    if(className.length) newelement.attr('class', className.trim());

    $(newelement).html('Newly born').appendTo(target);
}

createElement('div', '#test.a.b', '#con');​ // will work for #test.a.b or, .a.b or, #test.a

デモ

于 2012-05-14T15:49:09.100 に答える
5

私は実際に以前に作成しましたが、まだ少しバグがありますが、あなたが考えている場合には、次のように使用するだけで機能します

$.jseldom('#test.a.b')

兄弟セレクターでも使用できます

$.jseldom('#test #abc .child +.sibling-of-child')

https://github.com/shekhei/jseldom

あなたがそれが役に立つと思うならそれを使って、そこですべての問題を報告してください：PIは本当に人々に利益をもたらす何かにそれを作ることを望んでいます:)

于 2012-05-23T11:10:17.253 に答える
2

cssセレクター構文から要素を作成するようなものはありません。JQueryを使用すると、要素を作成および追加できますが、構文は、例のようにcssセレクターに基づいていません。たとえば、＃testdivの後にクラスaとbの#hellodivを追加するには、.after（）を使用できます。

$('#test').after("<div id='hello' class='a b'>Hello</div>");​​​​​​​​​

jsfiddle： http: //jsfiddle.net/septerr/RmAW6/

また

$('#test').after('<div>Hello</div>').attr('id', 'hello').addClass('a').addclass('b');​

jsfiddle： http: //jsfiddle.net/septerr/EQjLE/

于 2012-05-14T16:07:11.517 に答える
0

htmlタグを挿入するだけです

$("<div id='hello'></div>")

詳細については、ここを参照してください jQuery document.createElement同等ですか？

于 2012-05-14T15:49:27.163 に答える