Question

我想知道是否有可能，而不是通过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（）以及所有这些操作都不需要实现。

有人知道解决方案吗？

感谢。

Answer 1

创建<div id="hello"></div>

试

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

创建与{/ p>相同的<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

Answer 2

我实际上创建了一个早期的，仍然是一个小小的车，但是对于你正在考虑的情况会起作用，就像使用它一样

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

你甚至可以将它与兄弟选择器一起使用

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

https://github.com/shekhei/jseldom

如果你发现它有用，请使用它，并在那里报告所有问题：P我真的希望把它变成让人受益的东西：）

Answer 3

我没有看到那些会从css选择器语法中创建元素的东西。 JQuery允许您创建和添加元素，但语法不是基于示例中的css选择器。例如，在#test div之后添加一个带有a和b类的#hello div，你可以使用.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/

Answer 4

只需将html标签插入其中

即可

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

有关详细信息，请参见此处 jQuery document.createElement equivalent?

从jQuery选择器创建DOM元素

4 个答案: