从jQuery选择器创建DOM元素 [英] Create DOM element from jQuery selector

问题描述

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

有人知道解决方案吗?

谢谢.

解决方案

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

尝试

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

要创建与

<div id="test">This element already existed in the DOM.</div>
<div id="hello"></div>

相同的<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()或 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

演示

I was wondering if it were possible to, instead of selecting an element from the DOM via a jQuery selector, if I can create one instead.

For example:

$.create('#hello').insertAfter('#test');

would generate the following:

<div id="test">This element already existed in the DOM.</div>
<div id="hello"></div>

Or, better yet, for more complex operations:

$.create('#test.a.b');

for:

<div id="test" class="a b"></div>

Obviously, more complex operations like :selected or :nth-child or :not() and all of those need not be implemented.

Is anyone aware of a solution?

Thanks.

解决方案

To create <div id="hello"></div>

try

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

To create <div id="test" class="a b"></div> same as

$('<div id="test" class="a b"></div>').appendTo('body');

$('<div id="test" class="a b"></div>') will create new element but not add it to DOM.

To add that element you need to use append() or appendTo() or insetAfter() or insertBefore() and so on.

It is better to use a function to:

function createElement(el, target) {
   $(el).appendTo(target);
}

use the function like:

createElement('<div id="test" class="a b"></div>', 'body');

You can also append newly created element to any other target instead of body.

I think following function will help you:

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

这篇关于从jQuery选择器创建DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！