从jQuery选择器创建DOM元素

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');

创建<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

如果您觉得有用，请使用它，并在此报告所有问题：PI确实希望将其做成对人们有利的事情:)