jquery - 从 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