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

for:

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

显然，像:selected或:nth-child或:not()这样的更复杂的操作不需要实现。

有没有人知道一个解决方案？

谢谢。

- M Miller

---

可能是Can jQuery create an element by a selector?的重复问题。 - KyleMit

Answer 1

我之前创建了一个程序，还有一些小问题，但是可以满足你所需的功能，使用起来很简单，只需像这样：

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

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

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

https://github.com/shekhei/jseldom

如果你觉得它有用，请使用它，并在那里报告所有问题：P 我真的希望将其变成对人们有益的东西 :)

- Wong Shek Hei Felix

Answer 2

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

演示

- The System Restart

---

你的函数正是我需要的。我猜想 jQuery 没有默认功能来执行这样的操作，这是可以理解的，因为它不会被广泛使用。无论如何，谢谢你的帮助，这节省了我自己编写函数的烦恼！ :) - M Miller

@JohnGalt，伙计。很高兴能帮助你。 - The System Restart

你好。我很喜欢你的解决方案，但你需要更新一个细节：newelement = $('<'+el+'/>')，在你的演示中，尝试向html面板添加一个新的div并查看发生了什么。再次感谢！ - Cristopher

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/

- septerr

Answer 4

只需将HTML标签插入其中

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

请参阅此处以获取更多详细信息 jQuery document.createElement 等效方法？

- AlanFoster