從jQuery選擇器創建DOM元素

我想知道是否可以，而不是通過jQuery選擇器從DOM中選擇一個元素，如果我可以創建一個。從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或：n-child或：not（），所有這些操作都不需要實現。

有人知道解決方案嗎？

謝謝。

來源

2012-05-14 M Miller

[jQuery是否可以通過選擇器創建元素？]（https://stackoverflow.com/questions/3518650/can-jquery-create-an-element-by-a-selector ） – KyleMit

要創建<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

DEMO

來源

2012-05-14 15:49:09

你的功能是我一直在尋找的;那麼我想，jQuery沒有默認的功能來執行這樣的操作，這是可以理解的，因爲它沒有共同的用途。無論如何，感謝您的幫助，爲我省下了編寫這個功能的麻煩！ :) –

@JohnGalt WC哥們。很高興幫助你。 –

你好。我喜歡你的解決方案，但你必須更新一個細節：newelement = $（'<'+el+'/>'），在你的演示中，嘗試添加一個新的div到html pan，看看會發生什麼。再次感謝您！ – Cristopher

只需插入HTML標記它

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

在這裏看到更多細節 jQuery document.createElement equivalent?

來源

2012-05-14 15:49:27 AlanFoster

我沒有看到那裏會創建元素的CSS選擇器語法。 JQuery確實可以讓你創建和添加元素，但是語法並不像在你的例子中那樣基於css選擇器。例如，在#test div之後添加一個#hello div與類a和b，你可以使用。（）之後：

$('#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-14 16:07:11 septerr

其實我創建了一個較早的，還是有點馬車，而是將工作情況你在想，只是用它就好像

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

，你甚至可以與兄弟選擇使用它

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

https://github.com/shekhei/jseldom

使用它，如果你覺得有用，並且有報告所有的問題：PI我真的希望，使之成爲東西會使人受益:)

來源

2012-05-23 11:10:17

從jQuery選擇器創建DOM元素

回答

相關問題