从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元素

回答

相关问题