在没有父元素的另一个元素之后添加一个元素

Question

我想在jQuery中实现可重用的UI元素，在HTML元素后添加按钮。

有两种使用该元素的方案：在HTML中静态声明和在JS中动态创建。 我在实现第二个用例时遇到问题。

静态用例：

<span class=".ui-element'>Content</span>

我在jQuery中拾取元素并将按钮放在跨度之后：

the_span.after(the_button);

到目前为止，这个工作正常。

在动态创建的跨度上使用相同的技术时，会出现问题：

var the_span = $("<span>").text("Content").after(the_button);
return the_span; // caller is responsible for adding it the DOM

这是行不通的：此后DOM中没有按钮。 我猜这是因为该范围还没有父级，而静态声明的范围却有一个父级？

这可以通过解决

1. 在动态创建的范围周围引入包装元素：
   var wrapper = element.wrap($('span')).parent(); wrapper.append(the_span, the_button);
   现在，我的函数必须返回包装器而不是范围，以便调用者可以将其添加到DOM中。 这是意外行为，并且会中断链接。 我也不想在静态用例中要求包装器，因为在那里不需要。

2. the_span.append(the_button);
   我无法使用此解决方案，因为之后我希望能够在原始范围上使用.text（）和.html（），这将删除该按钮。

3. 要求先将跨度添加到DOM，然后再添加我的按钮。 这行得通，但是我更喜欢不需要此功能的解决方案。

我该如何解决？

Answer 1

关于第二个解决方案

2. the_span.append（the_button）; 我无法使用此解决方案，因为之后我希望能够在原始范围上使用.text（）和.html（），这将删除该按钮。

你试过了吗

the_span.parent().append(the_button);

以节省.text（）和.html（）的好处

Answer 2

您应该使用.add代替.after ，如下：

var the_span = $("<span>").text("Content").add(the_button);
return the_span; // caller is responsible for adding it the DOM

使用.add会将元素添加到jQuery选择中。

在工作中看到它： https ： //jsfiddle.net/nbm83e85/

更新：

您应该注意，更改the_span实例的文本如下：

the_button.text("Changed Button Name");
the_span.text("New Span Content");

将更改the_span jQuery集合中所有选定元素的文本，即跨度和按钮，因此按钮的文本将更改为与跨度相同的值。 要解决此问题，应按以下方式使用它：

the_button.text("Changed Button Name");
$(the_span[0]).text("New Span Content");

祝好运。